Align elements with fluid layout

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.

Was this helpful?

How can we improve it?
Search
Clear search
Close search
Google apps
Main menu