Height

How tall the column should be.

Where to find it
Labelled Height in the "Selected Column" 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
height

In plain English

Height is how much vertical room the column takes. By default a column is exactly as tall as the content inside it, growing when you add a line of text and shrinking when you remove one. That is usually the behaviour you want, because content that outgrows a fixed height has to go somewhere.

Set an explicit height when the shape of the box matters more than the words in it — matching card heights, a banner of a specific depth, or a full-screen hero section (a height of 100vh means "exactly one screen tall").

What each option does

OptionWhat you will see
autoLet the content decide how tall the column is. This is the default behaviour.

When you would use it

  • A hero banner should fill the visitor's screen: use 100vh.
  • Cards in a row look untidy because each is a slightly different height.
  • A decorative coloured band needs a specific depth regardless of content.

How to change it

  1. Select the column, open "Selected Column", then "Height".
  2. Enter a number and choose a unit, or select "auto" to let the content set the height.
  3. If content might grow beyond the height you set, decide what should happen using Overflow.
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

  • Content longer than the height you set will spill out of the box. Either use Min Height instead, or pair the height with an Overflow setting.
  • A height in percent needs the surrounding element to have a height of its own. Inside a normal row it usually does nothing — use vh instead.
  • Matching card heights is often better achieved with the row's Vertical Alignment set to "stretch" than by hard-coding a height.

Related settings

For developers

The technical reference for what this setting produces: MDN: height. 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