Fluid layout lets you align elements so that they automatically adjust their alignment and proportions for different page sizes and orientations. Responsive documents especially benefit from fluid layout, but fluid layout can also work with fixed-size elements.
You can use different techniques in Google Web Designer to build a fluid layout:
Flexbox (Fluid Layout) - Google Web Designer
Percentage-based values
You can set sizes and positions in percentages rather than pixels so that elements remain proportional to and relatively aligned with each other.
To use percentages instead of pixels, click px in the field in the Properties panel, and select % from the dropdown.
To convert all the position and size values to percentages, click the Use percentages button.
You can use a mix of percentage-based and pixel-based values in your document.
Anchoring
Anchoring lets you persistently align elements within a container, even when the element or container's size, padding, or border width changes. Any position or translation properties that you set will offset the element from the anchoring point.
You select a horizontal anchoring mode and a vertical anchoring mode. The default is "top left".
Horizontal anchoring modes
| Mode | Effect |
|---|---|
| left | The left edge of the element aligns to the left edge of the container. |
| center | The horizontal center of the element aligns to the horizontal center of the container. |
| right | The right edge of the element aligns to the right edge of the container. |
Vertical anchoring modes
| Mode | Effect |
|---|---|
| top | The top edge of the element aligns to the top edge of the container. |
| middle | The vertical middle of the element aligns to the vertical middle of the container. |
| bottom | The bottom edge of the element aligns to the bottom edge of the container. |
You can set the anchoring mode in the Properties panel or in the tool options bar when the Selection tool is active.
Flexbox
Flexbox (CSS Flexible Box Layout Module) is a way to flexibly arrange items in a container within rows or columns. Each item can grow or shrink in order to optimize the container space while maintaining the specified order and spacing.
You can use flexbox and configure flexbox properties in the Flexbox tab of the Responsive panel. Learn more about using flexbox.