Register to get access to 15+ free programming courses with interactive exercises

Columns Content layout fundamentals

Creating columns of text before the arrival of the CSS3 standard was quite difficult. People had to use different positioning properties and make sure the columns didn't fall apart while adding information.

Exmaple of multicolumn CSS layout

Look at the example above. While it looks easier, creating this layout was very difficult. The most common problem was text moving around in columns. To solve this problem, we used several blocks with information strictly positioned in one place. Text moving around by itself or the article changing was out of the question.

Now this problem can be solved using only two(!) properties. We'll look at these and some other properties in this lesson.

Creating columns

To create columns in CSS, we can use the column-count property. It does exactly what it says. Just specify the number of columns and the browser will do everything for you.

<article class="columns-2">
  <p>David Bowie, original name David Robert Jones, (born January 8, 1947, London, England—died January 10, 2016, New York, New York, U.S.), British singer, songwriter, and actor who was most prominent in the 1970s and best known for his shifting personae and musical genre hopping.</p>
  <p>To call Bowie a transitional figure in rock history is less a judgment than a job description. Every niche he ever found was on a cusp, and he was at home nowhere else—certainly not in the unmoneyed London suburb where his childhood was as dingy as his adult life would be glitzy. While this born dabbler’s favourite pose was that of a Great Artist beguiled by rock’s possibilities as a vehicle, in truth he was more a rocker drawn to artiness because it worked better than any other pose he had tried (not that he was not eclectic—he admired Anthony Newley and Jacques Brel and studied mime with Lindsay Kemp).</p>
</article>
.columns-2 {
  column-count: 2;
}

Important: the information inside the columns is processed as is. This means that all the indents are preserved. When it comes to paragraphs, it is worth getting rid of the upper padding. This will keep the first paragraph in line with the other columns.

.columns-2 p {
  margin-top: 0;
}

By default, the columns are divided evenly inside the container, and they'll take up all the available space. You can influence this behavior with the column-width property and set the optimal width of the columns. Optimal is the operative word here. Unlike the width property, you don't set an explicit width here, and if there is enough space in the container, then the columns will stretch to the full available width.

Why is this behavior necessary? Imagine we have a long text in two columns. For example, like on the image above. Without specifying the optimal width, the browser will line up the two columns based on the width of the device, regardless of what it may be. If this width is 300 pixels, then the columns will be 150 pixels each. It looks horrendous.

To prevent this, you can set an optimal width. If the browser can't make one column that width, then all the content will be lined up in one column. So much for adaptability. And these are just the first lessons :)

.columns-2 {
  column-count: 2;
  column-width: 250px;
}

Go to the CodePen website and try narrowing your browser window. At a certain point, the columns will go away, and all the text will be lined up in one column.

Column spacing

You may have noticed in the examples above that browsers automatically put spaces between columns. More often than not, you shouldn't trust the browser. One of the rules of designing layouts and programming is that explicit is better than implicit. By default, the distance between columns is 1em. The em unit is calculated based on the font size. If the font size is 16 pixels, then 1em is 16 pixels.

You can set the spacing between columns using the column-gap property. You'll see this property a lot. It's pretty versatile.

You can use different units within the column-gap property. Let's take the values in pixels as an example. In future lessons, you'll learn about other units of measurement.

.columns-2 {
  column-count: 2;
  column-gap: 30px;
  column-width: 250px;
}

Try changing the value of the column-gap property and see how it affects the columns.

Borders between columns

The CSS Multi-column Layout module allows you to define a visual border between columns. If you're familiar with the border property, which sets element borders, then you'll be familiar with the behavior already. Previously, creating borders between columns had to be done yourself, much to layout designers' chagrin.

The column-rule property is used to create the border, which is a shorthand version of the following properties:

  • column-rule-width⁣ – the width of the border
  • column-rule-style⁣ – the border type. The values are the same as those from the border property
  • column-rule-color⁣ – the color of the border

You can specify either three separate properties or use shorthand notation.

.columns-2 {
  column-count: 2;
  column-gap: 30px;
  column-rule: 2px solid black;
  column-width: 250px;
}

Spreading content across multiple columns

If you imagine a newspaper, the text isn't always strictly in columns. A common situation is that the headline, which is placed over all the columns, seems to separate them horizontally.

The column-span property is used to separate columns. It takes just two values:

  • none - the default value. The text is just inside the columns
  • all - the text sort of comes out of the column and separates them
.columns-2 {
  column-count: 2;
  column-gap: 30px;
  column-rule: 2px solid black;
  column-width: 250px;
}

h2 {
  text-align: center;
  column-span: all;
}

Columns overflow

In the examples, you can see that all elements inside the columns are moved automatically. It's not a bad solution for text, but if there are small blocks, and we definitely don't want the information inside them to be moved around, then we need a few other properties. So, how do you control the overflow of content within columns? There are several rules for this, which we'll talk about in this section.

  • break-before
  • break-after
  • break-inside

You can already tell by their names that it refers to moving items before and after and inside. All three properties take on a huge number of values since they are designed not only for columns but also for printing.

When working with CSS Multi-column Layout, we are most interested in the avoid value, which prohibits any breaks.

Take a look at the <figure> element. It consists of an image and a caption. For clarity, let's put a border around it and see that the image is in one column and the caption is in another. This is a bad text layout. Without a border, it is completely unclear that the text is just a caption for the image and not a piece of independent text.

This break happens within the figure element. To prevent such a break, you can use the break-inside property and disable it within this element. Find any newspaper article. Use CSS Multi-column Layout to recreate the layout.

figure {
  border: 1px solid;
  break-inside: avoid;
}

Do it yourself

Find any magazine article. Using CSS Multi-column Layout, recreate the article layout.


Recommended materials

  1. CSS Multi-column Layout Module Level 1 specification

Аватары экспертов Хекслета

Are there any more questions? Ask them in the Discussion section.

The Hexlet support team or other students will answer you.

For full access to the course you need a professional subscription.

A professional subscription will give you full access to all Hexlet courses, projects and lifetime access to the theory of lessons learned. You can cancel your subscription at any time.

Get access
130
courses
1000
exercises
2000+
hours of theory
3200
tests

Sign up

Programming courses for beginners and experienced developers. Start training for free

  • 130 courses, 2000+ hours of theory
  • 1000 practical tasks in a browser
  • 360 000 students
By sending the form, you agree to Personal Policy and Service Conditions

Our graduates work in companies:

<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.bookmate">Bookmate</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.healthsamurai">Healthsamurai</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.dualboot">Dualboot</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.abbyy">Abbyy</span>

Use Hexlet to the fullest extent!

  • Ask questions about the lesson
  • Test your knowledge in quizzes
  • Practice in your browser
  • Track your progress

Sign up or sign in

By sending the form, you agree to Personal Policy and Service Conditions

Toto Image

Ask questions if you want to discuss a theory or an exercise. Hexlet Support Team and experienced community members can help find answers and solve a problem.