How to Create Columns with column-count in CSS

In previous tutorials, we’ve explained that it can be dangerous to used HTML widths for your layout.

Fortunately, CSS is powerful enough to mimic any old-fashioned HTML. For example, you can easily create columns in CSS using the column-count property. This can be very useful for whole site layouts, but also to split long texts into columns.

In this short tutorial, I’ll show you how to create columns using column-count.

Step #1. The HTML

Create an HTML layout using the code below. Replace “Your text goes here” with your text. This could go into a Drupal node, a WordPress post, a Joomla article or anywhere else you need it.

<div class="content">
Your text goes here
</div>

Note: I’m using the class “content” in the div. We’ll use this to create the CSS selector in the next step.

Step #2. The CSS

In your CSS file, add the following code. This code will split the text into 2 columns:

.content {
column-count: 2;
-moz-column-count: 2;
-webkit-column-count: 2;
}

The prefixes in the CSS above are designed to add support for specific browsers:

• -webkit- for Chrome, Safari and Opera
• -moz- for Firefox

Step #3. Gap between columns

You can define the spacing between your columns by adding the “column-gap” property.

.content {
column-count: 2;
-moz-column-count: 2;
-webkit-column-count: 2;
column-gap: 60px;
-moz-column-gap: 60px;
-webkit-column-gap: 60px;
}

Change 60px to customize the separation.

Step #4. The end result

This is how our text will look:

Click here to see our example in action

Supported browsers

See which browsers support column-count.