CSS Grid has been available in most major browsers since early 2017, and it makes web layout more powerful than ever before. But complex-looking new syntax (line-names! Grid-areas!minmax!fit-content!fr units!) and missing IE 11 support can make it scary to many developers.
Don’t let that stop you: CSS Grid has made my layout process faster and simpler, with more flexibility. We can get started with a few basics, and the fallbacks don’t have to be overwhelming:
With Subgrid, we can also start to lay out nested elements on a shared grid, great for card layouts:
as well as common form patterns:
Miriam is a co-founder at OddBird, with 15 years experience as a project manager, user-experience designer, and front-end developer. She’s a member of the Sass core team, staff writer for CSS Tricks, and creator of popular open-source tools like Susy, True, and Herman. Miriam is also a musician with Teacup Gorilla, a published novelist & playwright, and a featured speaker at conferences around the world.
More articles by Miriam Suzanne…
GIPHY App Key not set. Please check settings