Creating a Multi-column Layout Using CSS

<PositionThe Grid Layout>

Code Playground is only enabled on larger screen sizes.

Creating layouts using CSS is one of the most fundamental skills for a web developer. A well-designed layout is the backbone of any successful website, as it improves user experience and usability.

There are three most common methods for creating webpage layouts: columns, grids, and flexbox.

Let's begin by discussing how to create a multi-column layout.

By default, the block-level elements will span over the entire viewport.

But in practice, you don't want these elements, especially the text elements, to occupy too much horizontal space, as research shows that the optimal length of a single line is around 80 characters.

People have limited attention span, and texts longer than that can be difficult for users to read.

The obvious solution for this problem is to split the layout into columns, which can be easily achieved using the column-* properties.

Column count and column width

To begin with, you can specify the number of columns using the column-count property.

<div class="col-3">
  <h2>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h2>
  <p>. . .</p>
  <p>. . .</p>
  <p>. . .</p>
  <p>. . .</p>
</div>

.col-3 {
  column-count: 3;
}

The browser will automatically choose the column width that will fit the entire layout inside the container.

Alternatively, you can set the column width, and let the browser pick the column count.

<div class="col-w-200">
  <h2>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h2>
  <p>. . .</p>
  <p>. . .</p>
  <p>. . .</p>
  <p>. . .</p>
</div>

.col-w-200 {
  column-width: 200px;
}

The browser will create as much columns as it possibly can, and then the remaining space will be shared by all columns.

Which means you are unlikely to get the column width you specify, unless the viewport size is exactly divisible by the specified column width.

You can verify this using the Developer Tools in your browser.

column width

It is not possible to customize the size for individual columns. If you want a more complex layout, you have to use grid or flexbox instead.

Column gap

You can also customize the gap between columns using the column-gap property. The default option is normal, which corresponds to 1em.

You can change that by setting a new length or percentage value. The percentage would be relative to the width of each column.

<div class="normal">
  <h2>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h2>
  <p>. . .</p>
</div>

<div class="length">
  <h2>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h2>
  <p>. . .</p>
</div>

<div class="percent">
  <h2>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h2>
  <p>. . .</p>
</div>

p {
  background-color: antiquewhite;
}

.normal {
  column-count: 3;
  column-gap: normal;
}

.length {
  column-count: 3;
  column-gap: 0px;
}

.percent {
  column-count: 3;
  column-gap: 10%;
}

Column rule

Using the column-rule property, you can also add a vertical rule between the columns.

You can define the width, style (solid, dotted...), and color.

div {
  column-count: 3;
  column-rule: 4px dotted blue;
}

Spanning over columns

Sometimes, you might want an element to span over multiple columns.

Take the <h2> element in the previous demo as an example, it is a bit cramped inside one column. The layout might look better if the heading can be taken out of the multi-column layout and be allowed to span over multiple columns.

This can be done with the column-span property by setting it to all, which allows the element to span over all columns.

<div>
  <h2>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h2>
  <p>. . .</p>
</div>

p {
  background-color: antiquewhite;
}

div {
  column-count: 3;
  column-rule: 4px dotted blue;
}

h2 {
  column-span: all;
}

Unfortunately, there are only two options, all and none, which means you cannot tell the element to span over a certain number of columns.

This is because the column properties are designed to create simple multi-column layouts, and there are not much customizations available.

In the next two lessons, we will discuss grids and flexbox, which are used to create much more complex layouts.

<PositionThe Grid Layout>