Gridlessness and modern CSS

Published

I just finished reading gridless.design, Donnie D’Amato’s thesis (in the form of a website) for doing away with the n-column grid or the n-pixel grid in the web design process. Go read it, if you haven’t already.

I’m convinced by his argument, being someone who has designed and implemented designs from both sides of the fence. I’ve reached for frameworks like the 960 grid system or Bootstrap's 12-column grid in the past. I’m not going to come down as hard on Donnie on these kinds of tools–I still think they have their place. You can build a serviceable website with a ready to go UI quickly and cheaply. This very website uses the flexbox-based grid from Chris Ferdinandi Kraken project in places, because sometimes frankly, you need to split up a .container class into halves, or thirds, or fourths.

The Bootstrap 12-column grid, like all frameworks, was a product of a specific time and place. The best practical argument against reaching for these kinds of things today is that we just have better, more powerful tools for layout that can accomplish much more (in fewer lines of code).

One of my new favorite websites (and newsletters) to learn from is ModernCSS.dev by Stephanie Eckles. Newer CSS features and properties are making me re-think the number of @media queries and breakpoints I am writing, even in responsive designs. The best advice on breakpoints I’ve found is to write them when your design is breaking. Thanks to relative units, tools like clamp, you can design layouts with fluid typography that don’t break often, if at all.

Stephanie’s many other projects are worth checking out; I’m particularly a fan of 11ty Rocks! as well as SmolCSS.

Another great resource for learning modern CSS was written by Andy Bell, commissioned by Google, at the enviable URL web.dev/learn/css/. Each lesson in this course is self-contained, meaning you don’t need to move from the course from start to finish. And it is not just layout, either. There’s an entire lesson on CSS animation, and an entire lesson on gradients, for example.

There’s never been a better time to learn CSS than now. It’s also a good time to time to re-learn CSS, especially if you are like me: tired of doing old hacks, and craving more elegant code.