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!
Top comments (2)
You don’t upload effect photo
Great idea spiritfox358! Done.