- Where to find it
- Labelled Vertical Alignment in the "Entire Row" section of the Modify drawer.
- Per device
- No — this setting has a single value that applies on every screen.
- Underlying CSS
alignItems
In plain English
Columns in a row are rarely the same height — one card has two lines of text, its neighbour has five. Vertical Alignment decides how they line up against each other.
You can pin them all to the top, centre them against each other, pin them to the bottom, or stretch every one to match the tallest. "stretch" is the option most people are actually looking for: it is what makes a row of cards with different amounts of text end up as a neat set of equal-height boxes, without you setting a single height by hand.
"baseline" is the subtle one. It lines up the first line of text in each column so the words sit on the same invisible ruled line, regardless of how much padding or how large a heading each column has. When headings of different sizes sit side by side and look slightly off, baseline is the fix.
What each option does
| Option | What you will see |
|---|---|
flex-start | Every column pinned to the top of the row. |
center | Columns centred against each other vertically. Good when a short label sits beside a tall image. |
flex-end | Every column pinned to the bottom of the row. |
baseline | The first line of text in each column sits on the same invisible line, whatever the padding or heading size. |
stretch | Every column grows to match the tallest. This is how you get equal-height cards without setting a height. |
When you would use it
- Cards in a row have different amounts of text and look ragged: choose "stretch".
- A short caption should sit level with the middle of a tall image: choose "center".
- Headings of different sizes side by side should sit on the same line: choose "baseline".
How to change it
- Click any column in the row, then open "Entire Row" in the Modify drawer.
- Open "Vertical Alignment" and click one of the five diagrams. The selected one is outlined in green.
Watch out for
- If every column already happens to be the same height, none of these options will look different. Add a line of text to one of them to see the effect.
- "stretch" is usually a better way to get matching card heights than setting a Height on each column, because it cannot trap content.
- A column with its own Height set will not stretch — the fixed height wins.
Related settings
For developers
The technical reference for what this setting produces: MDN: align-items. You do not need any of it to use the setting — it is there for whoever is building the components or debugging the published page.
Where to go next
- Back to the full attribute reference
- The Composer — the editing surface these settings live in.
- Publishing — how a change like this reaches your live site.