1. Basic Grid & Column Spanning
The Power of fr and span
Create flexible columns that automatically adjust to screen size. Items can span multiple tracks.
1 (Span 2)
3
4
5
6
.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
.item:first-child {
grid-column: span 2;
}
2. Named Grid Areas
Visual Layout Definition
Define your layout structure visually using string templates. Perfect for page skeletons.
Header
Main Content
.container {
display: grid;
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
height: 250px;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
3. Implicit Grid & Dense Packing
Handling Dynamic Content
When items exceed defined rows, the implicit grid creates new ones. Use dense to fill gaps.
1
2 (Tall)
3
4 (Wide)
5
6
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 80px;
grid-auto-flow: dense; /* Fills holes */
}
.tall { grid-row: span 2; }
.wide { grid-column: span 2; }