Hello Reader,

I’ve been having an ongoing discussion with someone in my Discord server about Flexbox, diving into the nitty-gritty of how it works.

The discussion has reinforced a few things for me:

• Grid is simpler than Flexbox
• People should learn Grid before they learn Flexbox

Grid seems more complicated than Flexbox, but the complexity of Grid is in the amount of properties and values that come with it, rather than how it actually works.

Flexbox seems easier because you declare display: flex and things happen.

The complicated part comes in describing what has happened and how the browser is making those things happen.

I don’t think you need to have a deep understanding of the browser’s layout algorithms to create simple layouts, but you need some idea of what’s going on, because you’ll invariably try something and it either won’t work at all, or not work as you’d expected it to, and you’ll be at a complete loss as to why if you don’t know at least a little bit of what’s going on under the hood.

With Flexbox, figuring out that side of things is a lot harder than with Grid, because Grid is much more predictable and easier to control.

Now, I don’t think you should learn all of Grid before Flexbox.

In fact, you probably should only learn the very basics of it first.

Things like grid-template-rows and -columns, along with how line numbers work, how to span across multiple rows or columns, and the basics of using the fr unit.

If you’re just learning how to make layouts, that’ll get you a long way, and then you can add simple Flexbox things on top of that for the things it’s good at (like, say, using it for your navigation), and where you don’t need to finagle it to do anything more complicated.

I’m a big fan of learning with the path of least resistance.

Using Grid for more structured layouts and Flexbox for more intrinsic and flexible things is that path of least resistance in my opinion.

From there, you can slowly level up both of them at the same time, as you build things and run into situations where you need to learn a little bit more.

And yes, I ranted about this in my podcast this week, where I also talk about how learning both of them early probably helps with critically thinking when approaching new problems in CSS as a general skill as well. You can listen to the podcast here, or watch on YouTube here (where I’ve gone to having actual video instead of just text on the screen).

Oh, and in case you are curious about learning how Flexbox really works, I do have a video that looks at that from last year 🙂.

🙋‍♂️ What I’ve been up to this week

Stop the Flexbox for 1D, Grid for 2D nonsense

​

Anytime I mention flexbox and grid in a video or social media post, I get a lot of replies about how the easiest way to decide between flexbox is to look at if it’s a 1D or 2D layout. I strongly disagree with this, and I look at why in this video 🙂.

A one-liner to fix shadows, borders, and other effects that break over multiple lines

​

If you’ve ever had an inline element with a shadow, or a background-color and a border-radius, you might be been pretty disappointed in what it looks like when it breaks over multiple lines.

In this Short, I take a look at how you can fix that issue with box-decoration-break: clone.

Here’s the CodePen I used for that video if you want to play with it a little.

An important note that I didn’t mention in the video because 60-seconds is too short sometimes, is that for Chrome and Safari, you still need to use the -webkit-box-decoration-break version.

🔗 Other awesome stuff around from the web

Three types of browser (and CSS!) magnification

Magnification on the web is an interesting topic, but it’s a rabbit hole I’ve never dove into… and now I don’t have to because Miriam Suzanne has put together this fantastic article after falling down that rabbit hole and helpfully summing it all up in one great article 😅.

It might not sound complicated… we can zoom in and out on a page, but it actually involves the two different viewports (yeah, two viewports) and a deep dive into what a CSS pixel even is, which you’d think is straightforward, but is anything but!

How Keyboard Navigation Works in a CSS Game

Recently, Temani Afif released a CSS-only game with keyboard controls, which I think was the first of its kind, and now he’s written about how he created it over on the Frontend Masters blog.

Even if you aren’t interested in CSS-only games, the technique he uses (using animation-timeline) is clever, and a fun exploration of one of those unexpected use-cases that pop up when new CSS features land.

🏁 </newsletter>

Have a great week,
Kevin

P.S. If you’re looking for something to do this summer, I’m going to be talking at THAT Conference in Wisconsin in a few weeks from now! If you haven’t booked already, you can use KEVINPOWELL24 for 10% off your ticket, and I’ll also be organizing a mini-meetup one of the days of the conference.

If you’re looking for a fall activity instead, I’ll be talking at Smashing Conf New York in October, and you can use this link to get 15% off your ticket. No meetup planned for this one, but I’ll be hanging out at the after party on the 8th.

​Unsubscribe · Preferences​
113 Cherry St #92768, Seattle, WA 98104-2205