CSS — Lesson 5
CSS Grid
Two-dimensional layout for complex designs.
CSS Grid
CSS Grid is a two-dimensional layout system that handles both rows and columns simultaneously - perfect for complex page layouts.
Setting Up Grid
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
Grid Template Columns
/* Three equal columns */
grid-template-columns: 1fr 1fr 1fr;
/* Fixed + flexible */
grid-template-columns: 250px 1fr;
/* Repeat function */
grid-template-columns: repeat(4, 1fr);
/* Mix of sizes */
grid-template-columns: 200px 1fr 200px;
Grid Template Rows
.container {
grid-template-rows: 100px 1fr 80px;
}
Grid Areas
Name specific areas in your grid for cleaner layouts.
.container {
display: grid;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
grid-template-columns: 250px 1fr;
grid-template-rows: 80px 1fr 60px;
gap: 12px;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
Grid vs Flexbox
- Flexbox: One-dimensional (row OR column). Great for components and small layouts.
- Grid: Two-dimensional (rows AND columns). Great for full page layouts and complex designs.
Responsive Grid without Media Queries
Use auto-fill or auto-fit with minmax for responsive layouts.
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px;
}
Tip: Use Grid for page-level layouts and Flexbox for component-level layouts. They work great together!
Practice what you learned in the Deoit Editor — a free, browser-based code editor.
Open Editor →