CSS Grid Generator

In short Grid is a two-dimensional layout system: you define columns and rows on the container and place items into the cells, and unlike flexbox the items line up in BOTH directions at once. That is the whole basis for choosing between them — if the alignment only matters along one axis, flexbox is simpler; the moment things need to line up across rows as well as along them, this is the tool. The two features that do most of the work are `fr` units and `minmax`. An `fr` is a share of the leftover space, so `1fr 2fr` splits it one-third and two-thirds after fixed content is accounted for. And `repeat(auto-fit, minmax(240px, 1fr))` builds a responsive card grid that reflows at every width with no media queries at all — it fits as many 240px-minimum columns as will go and stretches them to fill. That one line replaces most of what breakpoint-based grid systems were for. Named areas are the other reason to reach for Grid: writing `grid-template-areas` as a picture of the layout makes the CSS readable at a glance and lets you rearrange a whole page at a breakpoint by redrawing the picture.