1. Web
  2. CSS
  3. Reference
  4. Properties
  5. column-height
View on MDN

column-height

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The column-height CSS property specifies the height of the columns in a CSS multi-column layout.

The columns shorthand property can be used to set the column-height, column-count, and column-width property values in a single declaration.

Syntax

css
/* <length> value */
column-height: 300px;
column-height: 25em;
column-height: 70vh;

/* Global values */
column-height: inherit;
column-height: initial;
column-height: revert;
column-height: revert-layer;
column-height: unset;

Values

auto

The initial value. If the content container has a set height, the content columns will grow to that height, overflowing to the side if the content doesn't fit inside the container. If the content container does not have a set height, the content will equally distributed between the columns generated inside the container.

<length>

The height to set for the columns.

Description

When setting content to display in multiple columns via CSS multi-column layout (using the column-count or column-width property), one issue is that it can be hard to constrain the column height for readability when it exceeds the size of the viewport:

  • If you set a fixed height on the content container, excess columns will overflow to the side, and readers will have to scroll in the inline direction to read all the content.
  • If you don't set a fixed height on the content container, the columns of content will be very long and require readers to scroll down to the end of a column and then back up to the top of the next column.

The column-height property, along with column-wrap, solves this problem by allowing you to set a specific height for your columns and having them wrap onto a new row of columns when the container edge is reached. The default value of column-wrap is auto, which resolves to wrap when column-height is set to a <length> value; wrap allows the fixed-height columns to wrap onto multiple rows. When column-height is equal to auto, column-wrap: auto resolves to nowrap, allowing the columns to overflow horizontally if a fixed container height is set.

As a result of this default behavior, generally you don't need to explicitly set column-wrap to get the effect you want.

Formal definition

Value not found in DB!

Formal syntax

column-height = 
  auto            |
  <length [0,∞]>

Examples

Basic column-height usage

This example shows how to create a multi-column layout with multiple rows of columns, where each row fits inside the viewport for comfortable reading. It also uses CSS scroll snap to make it so that each scrolling action snaps the top of a new row of columns to the top of the viewport.

HTML

The markup for this example contains multiple paragraphs of content, taken from MDN landing pages. We won't show the HTML source here for brevity.

CSS

We start by giving the <body> element a column-width of 200px to set a preferred width for our columns that the browser will try to match as closely as possible, and a column-rule of 2px solid red. We then set a gap of 3em 2em, resulting in a 3em gap between rows and a 2em gap between columns. Finally, we set a column-height of 95vh to make our columns nearly as tall as the viewport. We also set column-wrap to wrap to remind you that this is the value column-wrap resolves to if column-height is given a specific <length> value; it is not necessary to set this explicitly.

css
body {
  column-width: 200px;
  column-rule: 2px solid red;
  gap: 3em 2em;
  column-height: 95vh;

  /* Default value if column-height is set; doesn't need to be set */
  column-wrap: wrap;
}

Next, we set the <h1> element's column-span property to all, to make the heading span across all the columns, and set the margin-top property of the first <p> to 0 so that it lines up with the top of the columns.

css
h1 {
  column-span: all;
}

p:first-of-type {
  margin-top: 0;
}

Finally, we set scroll-snap-type to y mandatory on the <html> element, and scroll-snap-align to start on the ::column pseudo-elements that represent each generated column. This causes the content to snap to the top of a new column each time it is scrolled.

css
html {
  scroll-snap-type: y mandatory;
}

::column {
  scroll-snap-align: start;
}

Result

The rendered result looks like this:

Try scrolling the content. Note how each new row of columns fills the viewport, and how the content snaps neatly to the top of a new row with each scroll.

column-height and column-count playground

This example provides scrolling text content laid out in multiple columns. It is very similar to the previous example, except that in this case you are provided with two range sliders that allow you to adjust the number of columns and the column height.

HTML

Our markup is the same as the previous example, except that we provide a form containing two <input="range"> elements to allow you to change the column-count and column-height values. This functionality is powered by some basic JavaScript.

We won't show the markup, or the JavaScript, for brevity.

CSS

The CSS is nearly identical to the previous example, except that we specify the number of columns with column-count rather than column-width, we don't set the column-height to the same height as the viewport, and we don't set the scroll snapping behavior.

In the body rule, we set an initial column-count of 3 to divide our content into three columns, and set an initial column-height of 20em. We also set the same column-rule and gap values as the previous example.

css
body {
  column-count: 3;
  column-height: 20em;

  column-rule: 2px solid red;
  gap: 3em 2em;
}

Result

The rendered result looks like this:

Try adjusting the number of columns and the column height to see the effect in the live rendering.

Specifications

Specification
CSS Multi-column Layout Module Level 2
# propdef-column-height

Browser compatibility

See also

Help improve MDN

Learn how to contribute

This page was last modified on by MDN contributors.

View this page on GitHub • Report a problem with this content