CSS Grid
grid layout, display: grid, grid-template-columnsDefinition
CSS’s two-dimensional layout model — a container with display: grid declares rows and columns (grid-template-columns: 9rem minmax(0, 1fr)), and children are placed into the cells by line number, by name, or by flowing in order; the tool for any layout where things must line up in two directions at once
The feed’s month rail beside its entries, the about page’s term-and-definition rows, a page shell with sidebar and content: each is one grid declaration where it would have been a fight in flexbox. repeat(auto-fill, minmax(16rem, 1fr)) is the responsive card grid without a single media query; named areas (grid-template-areas) make a layout readable as a picture. Subgrid is the missing piece it gained in 2023: a child grid that shares the parent’s tracks, so cards in a row align their internal fields.
Two axes, declared once, and the browser does the arithmetic. The layouts that used to need a framework’s twelve columns are a line of CSS now, and the framework’s columns were always this in disguise.