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.

https://hacks.mozilla.org/2019/10/faster-layouts-with-css-grid-and-subgrid/