CSS Grid Fundamentals
CSS Grid is the most powerful layout system in CSS. Unlike Flexbox (one-dimensional), Grid works in two dimensions — rows AND columns simultaneously. It lets you create complex page layouts, dashboard grids, and magazine-style designs without hacky CSS.
40 min•By Priygop Team•Last updated: Feb 2026
Grid Container Properties
- display: grid — Converts element to grid container. Children become grid items automatically
- grid-template-columns — Define columns: grid-template-columns: 200px 1fr 1fr (fixed + flexible)
- grid-template-rows — Define rows: grid-template-rows: auto 1fr auto (header + content + footer)
- gap — Space between cells: gap: 20px or row-gap: 20px column-gap: 16px
- fr unit — Fractional unit. 1fr = 1 share of remaining space. 2fr 1fr = 66% + 33%
- repeat() — Shorthand: repeat(3, 1fr) = 1fr 1fr 1fr. repeat(auto-fit, minmax(250px, 1fr)) for responsive grids
- minmax() — Set min and max sizes: minmax(200px, 1fr) = at least 200px, takes remaining space
Grid Layout Code
Example
/* Basic page layout */
.page {
display: grid;
grid-template-columns: 250px 1fr;
grid-template-rows: 60px 1fr 50px;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
min-height: 100vh;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }
/* Responsive card grid (no media queries!) */
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
}
/* Magazine layout */
.magazine {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 200px;
gap: 16px;
}
.magazine .featured {
grid-column: span 2;
grid-row: span 2; /* Takes 4 cells (2×2) */
}
/* Dashboard grid */
.dashboard {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(150px, auto);
gap: 16px;
}
.dashboard .wide { grid-column: span 2; }
.dashboard .tall { grid-row: span 2; }Try It Yourself: CSS Grid Dashboard
Try It Yourself: CSS Grid DashboardHTML
HTML Editor
✓ ValidTab = 2 spaces
HTML|38 lines|1704 chars|✓ Valid syntax
UTF-8