CSS Column Count Layouts

by Jack Pritchard

Hey! Just so you know, this article is over 2 years old. Some of the information in it might be outdated, so take it with a grain of salt. I'm not saying it's not worth a read, but don't take everything in it as gospel. If you're curious about something, it never hurts to double-check with a more up-to-date source!

Recently I have been looking in detail at responsive website design for an assignment in university. It involved me looking at different ways of making responsive images, type and web structures. Whilst looking at possible responsive layouts, I came across CSS column layouts. CSS column layouts are a great way of setting up a specific but fluid structure for a website. The beauty of it is that it requires very little code to work and there are several ways in which you can implement it or customise it.

Creating the Columns

#

The first solution would be to use code such as

.columns {column-count: 5};

What this code does is it will split the container element with the class 'columns' into 5 different set of columns in which the content will be distributed on. For maximum compatibility of the code, you would need to add the 2 web prefixes

-webkit-column-count: 5; -moz-column-count: 5;

Apply Media Queries to the Columns

#

So as you can see from the example above, the columns split the content up into the amount we specify in the CSS code which is currently "5". Open up the code pen in a new tab and re-size the browser to see how it responds. Pretty neat huh? As much fun as it is to see the content re-size, at lower screen resolutions you can see the content becomes squashed and unreadable. To fix this, we simply need to add some media queries for breakpoints where the content becomes unreadable. If applying to a real life scenario, changes to the font sizes and such should be added to but for this example, I will simply be changing the column count.

@media only screen and (max-width: 700px) { .columns { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; } }

Open the codepen to view the resizing in your browser.

Final Word

#

Now that the column count property in CSS has been explained in terms of the basics it can achieve, I would like to make note of the flaws it has in comparison to alternatives such as Flexbox. Even though the column layout is a great solution for responsive design and for creating basic layouts, if you want more control over the layout and flow of a website, then column count may not be the best option. Flexbox, as I will discuss very soon, has more options in terms of ordering content, aligning content and displaying on a website. That's not to say that column counts can't be used well or that they can't be used at all! They are a great tool to implement and you should definitely have a go at experimenting with it yourself! Happy Coding!