No media queries needed
One line of Grid can make a card layout that shows four columns on a laptop, two on a tablet and one on a phone — automatically. And named areas let you sketch a whole page layout in ASCII art.
auto-fit + minmax, and grid areas
- minmax(140px, 1fr) — each column at least 140px, at most an equal share.
- repeat(auto-fit, …) — fit as many columns as the width allows.
- grid-template-areas — name regions with strings; grid-area places an item.