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

column-wrap

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

The column-wrap CSS property specifies the wrapping behavior of overflow columns in a CSS multi-column layout.

Syntax

css
/* Keywords */
column-wrap: auto;
column-wrap: nowrap;
column-wrap: wrap;

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

Values

auto

The initial value. If the content container's column-height is set to a specific <length>, auto resolves to wrap, otherwise it resolves to nowrap.

nowrap

Overflow columns are created in the inline direction.

wrap

Overflow columns are placed in a new row in the block direction.

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.

There is an exception. When column-wrap is explicitly set to nowrap, a column-height <length> value has no effect. This can be used to create layouts that switch between horizontal and vertical (see wrap versus nowrap behavior).

Formal definition

Value not found in DB!

Formal syntax

column-wrap = 
  auto    |
  nowrap  |
  wrap

Examples

wrap versus nowrap behavior

This example shows how to create a multi-column layout with multiple rows of columns, which allows you to toggle the layout between horizontally and vertically scrolling by changing the column container's column-wrap value.

HTML

The markup for this example contains multiple paragraphs of content, taken from MDN landing pages, and a <input type="checkbox"> element to enable you to toggle the column container's column-wrap value between nowrap and wrap. We won't show the HTML source here for brevity.

CSS

We start by giving the <body> element a height of 90vh and a column-count of 3. 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 90vh to make our columns as tall as the <body>. We also set column-wrap to nowrap. We are doing this because the initial column-wrap value is auto, which resolves to wrap when column-height is set to a <length> value. By setting column-wrap explicitly to nowrap, we force excess content columns to overflow horizontally, creating the horizontal layout. In addition, a column-height <length> value has no effect when column-wrap is set to nowrap.

When the user checks the checkbox, the column-wrap property is set to wrap, which causes the excess content columns to overflow into new columns vertically, creating the vertical layout. At this point, the column-height value has an effect — it causes each row of columns to fill the viewport, which works well for the vertical layout.

css
body {
  height: 90vh;
  column-count: 3;
  gap: 3em 2em;
  column-height: 90vh;
  column-wrap: nowrap;
}

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;
}

JavaScript

In our JavaScript, we set a change event listener on the checkbox. When its value changes, we set the <body> element's column-wrap value to wrap if it is checked, and nowrap otherwise.

js
const checkbox = document.getElementById("set-wrap");
checkbox.addEventListener("change", () => {
  if (checkbox.checked) {
    document.body.style.columnWrap = "wrap";
  } else {
    document.body.style.columnWrap = "nowrap";
  }
});

Result

The rendered result looks like this:

Initially, try scrolling the content horizontally to see the effect of content-wrap: nowrap. Now check the checkbox, and note how the layout switches to vertically scrolling, with each new row of columns filling the viewport.

Specifications

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

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