Anyone interested in CSS layout should visit https://every-layout.dev, it's an extraordinary resource. The free content is great, but I'm happy I paid for the book and component generator. No affiliation, I'm just a delighted customer (who's been doing web-related work since 1998).
I never get tired of scanning these summaries. For someone who does ground-up CSS once a year or even less often, it is nice to see quick and clean solutions for common patterns in one place outside of an opinionated framework (bootstrap) or a insanely huge toolbox (tailwind). Thanks, OP.
Nifty little site! Though I don't think it's a great 'learning' tool. I would love if it presented multiple ways of achieving the same layout (EG legacy, flex, grid), so you could compare and see which is best.
For example, the 'holy grail' layout used to be done using tables. Then we moved away from tables, to using divs with clearfix and other positioning hacks. I lean heavily on flex these days - but they only show grid. I think it would be interesting to see the reason why grid was picked, by comparing it to other methods - so you can show off how clean the implementation is by contrast.
For the "Container query card" pattern, I get this (Firefox but that's not relevant):
"""
Warning: Your browser does not support CSS container queries. Please open this demo in Chrome Canary with the experimental #enable-container-queries flag turned on.
"""
Can you really call something a "pattern" if it's unavailable or broken to 99.9999% of users?
There's a warning about it in the intro, and a huge yellow warning sign next to said pattern. They did acknowledge that it was an experimental CSS feature.
That said, this looks really useful! I wonder if there are more resources like this? So often with CSS I write layouts from scratch when all I want to do is implement something that should be really common
Google really has some amazing web development documentation. It‘s so detailed and goes really deep down the different rabbit holes. If you follow all their advice, you really have a great, fast and responsive piece of digital media.
Interesting bits here:
Usage of the aspect-ratio property which you cannot use yet, because support is still lacking. (using the padding-bottom trick works fine though!)
And the absolute most amazing CSS feature coming to our browsers soon: Container queries! Cannot fkn wait to use these!
One of the things I really like about using Grid for layout is that it eliminates the need for any HTML tags that exist solely for layout, but you can def get away with only using Flexbox if that is your preference.
I can't believe we have grid and flex and sass and incredible frameworks. I'm inspired to go write the holy grail layout in tables and floats just for the heck of it, a cheerful nostalgic trip, and without frustration because at any moment I can recognize it's just a bad dream and it's all in the rear-view mirror and I can stop at any time. My table cells are going to have cool inline onmouseover functions too with whacky colours. It's going to be a good night!
I'd be interested in learning these layouts in a CSS-independent way, so that I can implement them using other tools, or even write a layout system myself (e.g. for a game UI). The layouts don't really seem to be CSS-specific.
