CSS Grid Layout System
Two-Dimensional Grid Layout
Perfect for complex page layouts, dashboards, galleries.
Grid Container
.grid {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: auto 1fr auto;
gap: 20px;
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
}Grid Items
.header { grid-area: header; }
.main { grid-area: main; }
.sidebar { grid-area: sidebar; }Advanced Features
- grid-column: 1 / -1 (full width)
- grid-row-gap vs gap
- subgrid (CSS Grid Level 3)
- minmax(200px, 1fr)