State of CSS: Multi-Column Layout

#css #grid #layout #beginners

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!

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.