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: