column-height CSS property

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
/* Keyword */
column-height: auto;

/* <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 be equally distributed between the columns generated inside the container.

<length>

The height of the columns. Must be non-negative.

Description

The column-height property sets the height of the columns in a multi-column layout. This is useful for constraining the column height for readability when setting multiple columns using the column-count or column-width property.

Without column-height, if the height of the multi-col content exceeds the viewport height, readers will need to scroll down to the end of a column and then back up to the top of the next column. One possible fix would be to set a fixed height on the content container, however, excess columns will then overflow to the side, and readers will have to scroll in the inline direction to read all the content.

The column-height property, along with column-wrap, allows you to set a specific height for the columns and wrap them 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 the column-wrap property.

Formal definition

Initial valueauto
Applies toBlock containers except table wrapper boxes
Inheritedno
Computed valueauto if specified as auto, otherwise for <length> the absolute value specified
Animation typeby computed value type

Formal syntax

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

Examples

undefined

Basic usage

This example demonstrates basic usage of the column-height property to create a wrapped multi-col layout.

HTML

We include a poem by Dr. Seuss using an <ol> containing 28 <li>s, followed by the author's name in a <p>.

html
<ol>
  <li>One fish</li>
  <li>Two fish</li>
  <li>Red fish</li>
  <li>Blue fish</li>
  ...
</ol>
<p>-- Dr. Seuss</p>

CSS

We define the <ol> to be a multi-column container by setting the column-width property to 150px, meaning the container will contain as many columns as possible with each being at least 150px wide. The gap property of 2em sets a horizontal gap between columns and a vertical gap between rows of columns. We then set the column-height to 2em, causing the column-wrap property's default auto value to resolve to wrap to create wrapped rows of columns.

css
ol {
  column-width: 150px;
  gap: 2em;
  column-height: 3em;
}

Result

Scroll-snapped columns

This example combines a wrapped multi-column layout with CSS scroll snapping, creating a usable experience where each scrolling action snaps a new row of columns neatly inside the full height of the viewport for comfortable reading.

HTML

The HTML, which contains multiple paragraphs of content from the MDN HTML, CSS, and JavaScript home pages, has been hidden for brevity.

CSS

We start by setting column-width on the <body> element to define the preferred width for the columns. A gap of 3em 2em results in a 3em gap between rows and a 2em gap between columns. The column-rule adds a line in the center of the gap between the columns. The column-height of 95vh makes the columns nearly as tall as the viewport.

We explicitly set column-wrap to wrap as a reminder of the applied wrapping behavior. We could have set the value to auto or omitted the property altogether, as, by default, column-wrap resolves to wrap when the column-height is set to a <length> value.

css
body {
  column-width: 150px;
  column-rule: 2px solid red;
  gap: 3em 2em;
  padding: 0 2em;
  column-height: 95vh;
  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 add scroll snapping by setting 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

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 builds upon the previous one by including two range sliders that allow you to adjust the multiple-column layout's column count and column height.

HTML and JavaScript

The HTML is the same as the previous example, with the addition of a form containing two <input="range"> elements that update the column-count and column-height values via JavaScript. The HTML and JavaScript are hidden for brevity.

CSS

We specify the column-rule and gap with the same values as the previous example. We don't specify a column-width; instead, we create a multi-column layout using the column-count property, interactively setting the number of columns and the height of the column rows using JavaScript. Scroll snapping is not included in this example.

css
body {
  column-count: 3;
  column-height: 20em;
  column-rule: 2px solid red;
  gap: 3em 2em;
  padding: 0 2em;
}

Result

Adjust the number of columns and the column height to see the effect of these properties.

Specifications

See also