DEV Community

Justin Boyson
Justin Boyson

Posted on

State of CSS: Multi-Column Layout

Lego Abbey Road

Photo by Daniel Cheung on Unsplash

The State of CSS 2020 came out recently. Reading through it I realized that I have some pretty big gaps in my CSS knowledge. What better way to plug that gap than a series on all things CSS that I missed?

I'm going to walk through all the features in State of CSS. I'll cover topics that are either new to me, or less than half of respondents say they have used.

Let's kick it off with Multi-Column Layouts!

First an example: view on codepen

Multi-Column example

I alway forget about this one, but it's super handy. You don't always need CSS Grid. Sometimes you just want your beautiful prose not to spread across the screen like a rude subway passenger.

The syntax is short and easy to understand.


If you want a fixed number of columns.


The real money maker. Auto generate columns of a certain size OR character count.


Style the dividing line between columns.


Set the space between columns.


Make an element span all columns. User for fancy headings or ad banners (please don't use it for ad banners).

That's it for now, next time we'll cover position sticky!

Top comments (2)

spiritfox358 profile image

You don’t upload effect photo

unclejustin profile image
Justin Boyson

Great idea spiritfox358! Done.