📖 Notes
LESSON 10 OF 32
CSS Grid — 2D Layout Power
CSS Grid — 2D Layouts
Grid controls both rows and columns simultaneously. Perfect for page layouts and card grids.
Flexbox vs Grid
One Dimension vs Two
➡️
Flexbox
1D — a single row or column
▦
Grid
2D — rows AND columns at once
🏗️
Best for
Page layouts, image galleries, dashboards
Container & Item Properties
Grid in Practice
CSS.layout {
display: grid;
grid-template-columns: 260px 1fr;
min-height: 100vh;
}
/* Responsive card grid — no media query needed */
.cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 20px;
}
/* Spanning columns */
.featured { grid-column: span 2; }
🧠
auto-fill + minmax is the trick worth memorising
This single line automatically fits as many 280px-minimum columns as will fit the container, and reflows to fewer, wider columns as the screen shrinks — often removing the need for a separate mobile breakpoint entirely.