Best Practices With CSS Grid Layout — Smashing Magazine

A great set of answers from Rachel to frequently asked questions about CSS grid. She addresses the evergreen question of when to use flexbox and when to use grid:

I tend to use Flexbox for components where I want the natural size of items to strongly control their layout, essentially pushing the other items around.

A sign that perhaps Flexbox isn’t the layout method I should choose is when I start adding percentage widths to flex items and setting flex-grow to 0. The reason to add percentage widths to flex items is often because I’m trying to line them up in two dimensions (lining things up in two dimensions is exactly what Grid is for).

Best Practices With CSS Grid Layout — Smashing Magazine

Tagged with

Related links

CSS or BS?

We show you a CSS property name. You tell us if it’s real or if we made it up. That’s it. It starts easy. It does not stay easy.

Tagged with

Cascading Layouts | OddBird

A workshop on resilient CSS layouts

Oh, hell yes!

Do not hesitate—sign yourself up to this series of three online workshops by Miriam. This is the quickest to level up your working knowledge of the most powerful parts of CSS.

By the end of this you’re going to feel like Neo in that bit of The Matrix when he says “I know kung-fu!” …except kung-fu isn’t very useful for building resilient and maintainable websites, whereas modern CSS absolutely is.

Tagged with

Better typography with text-wrap pretty | WebKit

Everything you ever wanted to know about text-wrap: pretty in CSS.

Tagged with

Building WebSites With LLMS - Jim Nielsen’s Blog

And by LLMS I mean: (L)ots of (L)ittle ht(M)l page(S).

I really like this approach: using separate pages instead of in-page interactions. I remember Simon talking about how great this works, and that was a few years back, before we had view transitions.

I build separate, small HTML pages for each “interaction” I want, then I let CSS transitions take over and I get something that feels better than its JS counterpart for way less work.

Tagged with

Why I Like Designing in the Browser – Cloud Four

This describes how I like to work too.

Tagged with

Related posts

Making the website for Research By The Sea

Having fun with view transitions and scroll-driven animations.

Speedier tunes

Improving performance with containment.

Workaround

Browsers and bugs.

Control

Trying to understand a different mindset to mine.

CSS Day 2022

Excellent as always.