CSS Grid fundamentals
CSS Grid fundamentals
Grid defines rows and columns and places items into cells or named areas. Use repeat, minmax and fr units to build flexible tracks. auto-fit and auto-fill can create responsive card grids without many media queries.
Try it yourself
Change the example, run it, and explain the result in your own words. Then create one variation of your own.
Key idea
Use the example as a starting point, not something to memorize. Practise, inspect the result and make small improvements.
Code example
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.25rem; }