Build responsive layouts with Row presets (Whole, Halves, Thirds, asymmetric splits) and per-breakpoint Column widths, order, and styling.
Loading the guide...
Help us make the guides more useful.
0 helpful · 0 not helpful
Rows and Columns are the layout grid inside every Section. A Row picks the column arrangement; each Column holds elements and can size itself independently at every screen width. Master these two and you can build any layout in the product without custom CSS.
Every Row has a Layout preset. Click the layout thumbnail at the top of the Row's Settings tab to pick one visually:
| Group | Presets |
|---|---|
| Equal | Whole, Halves, Thirds, Quarters, Fifths, Sixths |
| Two-column asymmetric | Thirds 2-1, Thirds 1-2, Quarters 3-1, Quarters 1-3, Fifths 2-3, Fifths 3-2, Fifths 1-4, Fifths 4-1, Sixths 1-5, Sixths 5-1 |
| Three-plus columns | Quarters 2-1-1, Quarters 1-1-2, Quarters 1-2-1, Fifths 3-1-1, Fifths 1-1-3, Fifths 1-3-1, Fifths 2-1-1-1, Fifths 1-1-1-2 |
| Fixed sidebars | Fixed-Left, Fixed-Right, Fixed-Inner, Fixed-Outer (one fixed-width column plus one that expands) |
The numbers describe the split: Thirds 2-1 is a two-column row where the first column takes two thirds and the second one third. Changing the preset reconciles the Columns automatically: new Columns are added empty, and when the new preset has fewer Columns, the content of the removed ones moves into the last remaining Column, so nothing is lost. Picking a preset also resets every Column's per-breakpoint widths and Order First to the preset's own, so re-apply any custom widths afterwards.
Click Edit Layout on a Row to open the column layout editor. It shows every Column with a width per breakpoint, from Phone Portrait up to Large Screen, plus its Order First setting. This is the same data as the per-Column Width group described below, edited for all columns in one place.
Never let side-by-side cards touch: keep a gap set on any Row that holds cards or tiles, and check both desktop (side by side) and phone (stacked) in the device preview.
Rows also carry Margin Top / Margin Bottom scales, the same background Overlay group Sections have, and an HTML Element select (div by default).
Select a Column to style the slot itself.
Each Column has five independent width selects:
| Breakpoint | Field in the Width group |
|---|---|
| Phone Portrait | Phone Portrait |
| Phone Landscape | Phone Landscape |
| Tablet Landscape | Tablet Landscape |
| Desktop | Desktop |
| Large Screen | Large Screen |
Width values are fractions (1/1, 1/2, 1/3, 2/3, 1/4, 3/4, 1/5 through 4/5, 1/6, 5/6) plus Auto and Expand. An empty value inherits from the next smaller breakpoint, so the common pattern is: full width (1/1) on Phone Portrait, then the real split (say 1/2) from Tablet Landscape up. That is exactly what the Row presets set up for you - columns stack on phones and sit side by side on larger screens.
Each breakpoint also has an Order First control (None / First / Last). Use it when stacking changes the story - for example, an image column that sits right of the text on desktop but should appear above the text on phones.
Align the Column's elements Top (default), Middle, or Bottom relative to the tallest column in the Row - or Stretch (fill height), which makes the column fill the Row's full height so a background or an overlay gallery inside it matches its neighbors.
Padding sets the inner spacing on all sides: Default, Small, Medium, Large, or None. Combined with a background color, this is how you make a Column read as a card without writing any CSS.
Like Sections, each Column has a Show on select: All devices, Desktop only, or Mobile only.
Columns can render as div, address, article, aside, footer, header, hgroup, nav, or section, and carry the standard Advanced bundle (Name, Status, ID, Classes, Attributes, scoped CSS).
You should almost never need custom CSS for layout. If a layout seems to demand it, look again at the presets, per-breakpoint widths, and gaps.
| Task | Control |
|---|---|
| Two columns, 2/3 + 1/3 | Row Layout: Thirds 2-1 |
| Space between cards | Row Column Gap + Row Gap |
| Stack differently on phones | Column Width (per breakpoint) + Order First |
| Make a column a card | Column Background Color + Padding |
| Narrow one row of content | Row Max Width |
| Hide a column on phones | Column Show on: Desktop only |