Layouts define how content flows across your page. Grids and nested sections help you create responsive, balanced designs.
Columns
Nesting Sections
Layout sections become powerful when nested. The example below shows how nesting can be used to build a bento-style layout.
Bento Box
The minimum width of elements is defined in the parent layout section. This keeps things responsive.
Alignment and Spacing
Alignment and spacing are controlled directly from the section toolbar. You can define gaps and set a minimum child width — the key to responsive layouts.
The example below shows how elements align vertically and horizontally. It starts with the vertical defaults, while horizontal alignment uses the “stretch to fill row” option.
Now again a similar example, but this time the children are centered vertically.
Elements can be distributed horizontally in ways other than stretch, for example "space around". They align at the bottom and both have a width of 1/4.