How to Create Columns with column-count in CSS

| Coding Tutorials
Columns with CSS using column-count

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:

css columns

Click here to see our example in action

Supported browsers

See which browsers support column-count.


About the author

Valentín creates beautiful designs from amongst the tequila plants of Jalisco, Mexico. You can see Valentín's design work all over this site and you can often find him helping members in support.