Create Print Like Column Layout with CSS Columns

Using the CSS columns property, we can set multiple to any element.

For the first impression, it sounds like it is a fresh new layout technique, but it is partly true. We can indeed create some layout, but it will be useful for text most of the time. It can be helpful in a sub-layout, but for a complex system, it won’t.

In print, it is a common way to break the body copy into different columns to make the text more consumable and more stylish. On the web, this need isn’t too common, but with the help of this feature, we can achieve it.

Give your project a solid foundation.

Break the Text into Multiple Columns

There is one significant difference between a regular columned layout and one with a text; in the second case, we usually don’t care where our content breaks. We want the text/content to naturally flow to the next column when there isn’t any place at the current one. In this case, this is an important feature.

Columns is a shorthand property for the column-width and column-count. Like always with the shorthands, if we omit one of the values, it gets initial (which is auto in both cases).

• column-width: the ideal width of the column as a length value or auto (as a default). The browser tries to optimize this value so it can be broader or narrower; this is operating as a minimum width.
• column-count: the ideal number of the columns as an integer value or auto (as a default); this is operating as a maximum column number.

.columns-container {
    columns: 300px 3;
}

Using the code above, the layout will break automatically at a lower resolution and only will show us three columns when the viewport is wide enough.

See the Pen
CSS Clolumns Demo with Text by Adam Laki (@adamlaki)
on CodePen.

Here you can see a complex example where you can see more than this one property. To know more about the additional section, please read the next section!

More Column Property

Using the shorthand property, we can set the basics, but there are some more settings that we can fine-tune.

column-gap

The column-gap is self-evident; it defines the gap width between two columns. It is a length value, and the default is “normal”, which is 1rem. We can use any length unit except the percent.

.columns-container {
    columns: 300px 3;
    column-gap: 3rem;
}

column-rule

With the column-rule, we can set a border which will display in the gap. It is functionating as a separator line. It is a shorthand for column-rule-width, column-rule-style and column-rule-color. It is the same pattern as in the case of the border with the same values.

.columns-container {
    columns: 300px 3;
    column-gap: 3rem;
    column-rule: 1px solid #f1f1f1;
}

column-fill

Using the column-fill property, we can control how the columns will be filled with the content.

We have two values, auto, and balance. The “balance” value will try to create equal column height while the “auto” attempts to fill the columns from the first column. Note that this is mostly will show anything if you have fixed heights.

.my-columns {
    column-fill: auto;
}

column-span

With the column-span property, we can span an element to take multiple columns (if there is more than one column). We can break our multi-column layout and “insert” a full width one.

It can have two values: all or none, and we have to declare it on the child element.

hr {
    column-span: all;
    ...
}

break-inside

Using the break-inside, we can modify the content’s natural flow. There are cases when we don’t want a continuous stream like when we have a block element (a box or something similar).

The use case can be a masonry layout where we have sections, and we don’t want to tear them into two parts.

It can have two values: auto or avoid. We have to declare this on the child elements.

.masonry-item {
    break-inside: avoid;
}

The Support of the Columns

Today we can freely experience with this feature because, as you see on Can I Use, it has excellent support!