- Where to find it
- Labelled Vertical Alignment in the "Entire Row" section of the Modify drawer.
- Per device
- Yes — you can set one value for every screen, or separate values for phone, tablet, and desktop.
- Underlying CSS
alignItems
In plain English
Columns in a row are rarely the same height. Vertical Alignment decides how they line up against each other.
New edits are stored per device on the row; classic row fields still work as a fallback.
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. |
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. |
stretch | Every column grows to match the tallest. |
When you would use it
- Cards in a row have different amounts of text: choose "stretch".
- A short caption should sit level with the middle of a tall image: choose "center".
How to change it
- Open "Entire Row", then "Vertical Alignment", and click a diagram.
One value, or one per device? Every input in this setting sits under a “Same value for all resolutions” checkbox. Leave it checked for a single value everywhere, or uncheck it to give phones, tablets, and desktops their own. How per-device values work.
Watch out for
- A column with its own Height set will not stretch — the fixed height wins.
Related settings
- Horizontal Alignment
- Row Min Height
- Vertical Alignment
- Flex Wrap Setting
- Using a CSS variable instead of a typed value
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.