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 IE11 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:
The post Faster Layouts with CSS Grid (and Subgrid!) appeared first on Mozilla Hacks – the Web developer blog.