Play · 1 h 5 min
CSS grid for real pages
Lesson 2 of 4 · 1 h 5 min · with Marco Bellini
Named areas, auto-fit columns and subgrid, applied to a full magazine page.
We rebuild a magazine front page from a design file using only CSS grid.
Named areas
grid-template-areas lets you draw the layout in your stylesheet. Rearranging
the page for a small screen becomes a matter of redrawing the map.
Auto-fit columns
repeat(auto-fit, minmax(16rem, 1fr)) gives you a card grid that adds and
drops columns on its own. We look at when that is exactly right and when it
isn’t.
Subgrid
Subgrid lets cards line up their titles and buttons across a row, which used to need JavaScript.