State of CSS: Multi-Column Layout

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

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.

column-count

If you want a fixed number of columns.

column-width

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

column-rule

Style the dividing line between columns.

column-gap

Set the space between columns.

column-span

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!