1
2
Two columns with equal width using 1fr 1fr.
Grid Template Columns
The grid-template-columns property defines the number and width of columns. Use fr units for flexible fractions of available space.
1
2
3
Three columns with equal width using 1fr 1fr 1fr.
1
2
3
4
Use repeat() to avoid repetition.
Fixed
1fr
2fr
Mix fixed and flexible columns. 2fr is twice 1fr.
.grid { display: grid; gap: 1rem; }
.two-cols { grid-template-columns: 1fr 1fr; }
.three-cols { grid-template-columns: repeat(3, 1fr); }
.mixed { grid-template-columns: 100px 1fr 2fr; }Auto-fit & Auto-fill
Use auto-fit or auto-fill with minmax() for responsive grids that automatically adjust the number of columns.
1
2
3
4
5
Items expand to fill empty space. Columns collapse when items fit.
1
2
Empty columns maintained. Items don't expand to fill.
/* Items stretch to fill row */
.auto-fit {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
/* Empty columns preserved */
.auto-fill {
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}Gap
The gap property adds space between grid items. Use row-gap and column-gap for different spacing.
1
2
3
Small uniform gap between all items.
1
2
3
Medium uniform gap between all items.
1
2
3
4
5
6
Different gaps for rows and columns.
.gap-uniform { gap: 1rem; }
.gap-different { row-gap: 0.5rem; column-gap: 2rem; }Column & Row Spanning
Use grid-column: span N and grid-row: span N to make items span multiple columns or rows.
Span 2
1
2
3
Item spans across 2 columns.
Tall
1
2
3
4
Item spans across 2 rows.
Full Width
1
2
3
Item spans from first to last column.
.span-2-cols { grid-column: span 2; }
.span-2-rows { grid-row: span 2; }
.full-width { grid-column: 1 / -1; }
.specific { grid-column: 2 / 4; grid-row: 1 / 3; }Grid Template Areas
Use grid-template-areas to create named layout regions for semantic and readable layouts.
Header
Main
Aside
Classic holy grail layout using named areas.
.layout {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header header"
"sidebar main aside"
"footer footer footer";
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.aside { grid-area: aside; }
.footer { grid-area: footer; }Dashboard Layout
Combine spanning with a defined grid to create dashboard-style layouts with cards of varying sizes.
Wide Card
Small
Small
Tall
Wide Card
Small
Dashboard layout with wide and tall cards spanning cells.
.dashboard {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
}
.card-wide { grid-column: span 2; }
.card-tall { grid-row: span 2; }
.card-large { grid-column: span 2; grid-row: span 2; }Grid Alignment
Use justify-content to align the grid horizontally, align-items for items vertically, and place-items for both.
1
2
3
Grid centered horizontally in container.
1
2
3
Grid columns spread with space between.
S
M
L
Items vertically centered in their cells.
Centered!
Perfect centering with place-items shorthand.
.grid-center { justify-content: center; }
.grid-between { justify-content: space-between; }
.items-center { align-items: center; }
.place-center { place-items: center; }
/* place-items is shorthand for align-items + justify-items */Frequently asked questions
- What is repeat(auto-fit, minmax())?
- It creates as many columns as fit with a minimum track size, which is great for responsive card grids.
- fr unit explained?
- 1fr is one fraction of leftover space in the grid container after gaps and fixed tracks.
- Can grid replace flexbox?
- They complement each other. Use grid for page layout; flex for aligning items inside a cell.