Skip to main content

The Cascade is a blog about the past, present, and future of CSS.

Howdy—Robin Rendle here.

This blog keeps me in the loop with everything that’s possible with CSS lately but it’s also a reminder to celebrate the people doing the hard work building stuff for the web.

You can subscribe to The Cascade via RSS, shoot me an email if you absolutely must, or follow the feed. This project is directly supported by readers and the membership program.

Right now the newsletter is taking a bit of a break whilst I figure out a healthy publishing cadence, but you can subscribe below:

Tagged with

CSS Grid Areas

After all these years of using CSS Grid and I still feel like I haven’t grokked everything that it’s capable of. Ahmad Shadeed’s latest interactive tutorial is a great reminder of that where he’s written about named grid areas and explains the following bit of CSS:

.layout {
  grid-template-columns:  [full-start] 1fr
                          [content-start] 2fr
                          [content-end] 1fr [full-end];
}

So what Ahmad has done here is defined and named specific areas of a grid and then he can use them elsewhere in his CSS like this:

.layout-item {
  grid-column: content-start / content-end;
}

Smart stuff.

The Gap

Ahmad Shadeed has written another beautifully designed and polished deep-dive but this time all about the gap property. Sometimes it’s nice to go back in time and remember all the negative-margin hacks and complicated layout-related code we had to write just to space things apart. Thankfully no longer!

Another thing Ahmad’s post reminded me is that not only is gap straight up easier to use than managing a lot of margin declarations, but it also prevents layout bugs too. On this thread, Ahmad writes:

Building a UI that doesn’t break is impossible, but at least, you can reduce the issues that might happen:

  • Ask questions: what will happen if there is only one item? or do you expect another variation of this component that will do X and Y?
  • Make sure to stress-test the UI for any spacing issues.