How to Create Columns with column-count in CSS

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.

{codecitation}<div class=”content”>
Your text goes here
</div>{/codecitation}

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:

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

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.

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

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.

Instructor

  • Valentin discovered Joomla in 2010, and since then he has considered it as the best CMS. Valentin has been coding extensions and templates for Joomla for many years and truly enjoys helping people build their own websites with Open Source tools. He lives in San Julián, Jalisco, México.

0 0 votes
Blog Rating
Subscribe
Notify of
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Yaeger Design

The good thing about “column-count” is that it is responsive in its width. Unfortunately, the “column-gap” property cannot take % values, making it unresponsive. So, smaller column gaps would be better than “60px,” like the default, which is “1em.”
For an alternative responsive layout, you could use a fixed “column-width” value in addition to the “column-count” and the gap would drop out on screens narrower than the specified column width!

1
0
Would love your thoughts, please comment.x
()
x