DEV Community

Justin Boyson
Justin Boyson

Posted on

4

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.

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!

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (2)

Collapse
 
spiritfox358 profile image
spiritfox358

You don’t upload effect photo

Collapse
 
unclejustin profile image
Justin Boyson

Great idea spiritfox358! Done.

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay