CSS Grid is the most powerful layout system for two-dimensional designs.
Enable Grid
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* 3 equal columns */
gap: 24px;
}
Column Patterns
/* Fixed + flexible */
grid-template-columns: 240px 1fr;
/* Repeat shorthand */
grid-template-columns: repeat(3, 1fr);
/* Auto-fill responsive — no media queries needed! */
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
/* Named areas */
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
Placing Items
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
/* Span multiple columns */
.wide { grid-column: 1 / 3; } /* col 1 to 3 */
.tall { grid-row: span 2; } /* span 2 rows */
repeat(auto-fill, minmax(280px, 1fr)) gives you a responsive grid with no media queries — cards wrap automatically when the viewport gets too narrow.
🧩
Test Yourself
4 questions
Q1.Which property defines columns in a CSS Grid?
Q2.What does the fr unit represent in grid layout?
Q3.Which declaration creates a responsive grid with no media queries?
Q4.Which property assigns an item to a named grid area?