I recently gave a CSS layout talk at Pixel Pioneers conference in my (sort of) home city of Bristol. I’ve spoken about CSS layout quite a bit over the years, but I feel like there’s always a lot to talk about, as things are changing all the time!
Although the talk shares a title with others I’ve given in the past year or two, I’ve updated it and added a couple of new sections covering anchor positioning and the forthcoming masonry layout proposal. If you attended the talk, you might find the slides useful, which include links to some of the demos I showed.
View Modern CSS Layout is Awesome! (2024 edition) on Notist.
It’s often hard to know what sort of level to pitch a talk like this, and I usually vary it depending on the conference. Being immersed in CSS discussions online, and attending events like CSS Day, it’s easy to get into the mindset that everyone already knows this stuff. But, as demonstrated time and time again, that’s not true at all! I regularly meet developers who are very far from using the fancy new CSS features bestowed upon us. They might be restricted by their workplace to using a particular framework, or prioritising other skills (the financial rewards for being a CSS expert are famously low). Perhaps they just don’t have the free time to spend tinkering with new CSS, or would (understandably) rather be doing something else.
Most people are not focused on trying to become CSS experts, but on knowing enough to do their job well. And that’s okay! Miriam Suzanne and Max Böck have both written insightful takes on the seemingly lacklustre adoption of new CSS features. I think it’s perfectly fine that many developers are taking their time. It’s enough to know that a feature exists, and you might be able to use it when you need it, without rushing to refactor your code. If what you already know works well enough for you, then why change it? But it’s good to be aware of new features, as they’re designed to make your like easier. I absolutely agree with Miriam here:
But if you’re still avoiding grid – whatever your reasons – you are, in fact, missing out. CSS grid is one of the best features in CSS, and one of the biggest time-savers on every site we build.
I think the same goes for min(), max() and clamp() functions: they make building fluid, responsive designs far easier, but I’m always surprised by how many developers aren’t aware of them. That’s why I’m happy to go along to conferences and introduce developers to features that have been around for a while, but which they might not have had the chance to become familiar with yet. Most people come away pleasantly surprised by what they can do with CSS today, let alone the CSS of the future.