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 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;

[codepen_embed height=300 theme_id=1 slug_hash='JGjjzv' user='JackDavies' default_tab='result' animations='run']

See the Pen Responsive Columns by Jack Davies (@JackDavies) on CodePen

[/codepen_embed]

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.

[codepen_embed height=300 theme_id=1 slug_hash='gPOOJV' user='JackDavies' default_tab='result' animations='run']

See the Pen Responsive Columns Media Queries by Jack Davies (@JackDavies) on CodePen

[/codepen_embed]

 

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!

Related Blog Posts