BitWithBite
Full-Stack · Quick Reference
Lesson 10 — CSS Grid Cheat Sheet
In one line: Grid lays out items in two dimensions (rows and columns) at once — ideal for card layouts and page-level structure.
Key Ideas
1display: grid. Turns children into grid items.
2grid-template-columns. Defines column count and width.
3fr unit. A fraction of remaining space.
4gap. Space between rows and columns.
5auto-fill + minmax. Responsive columns with zero media queries.
Responsive Card Grid
.cards {
display: grid;
grid-template-columns:
repeat(auto-fill, minmax(220px, 1fr));
gap: 1.5rem;
}
grid-template-columns: 1fr 1fr 1fr
3 equal columns