Container Properties
.container {
display: grid; /* or inline-grid */
}
grid-template-columns / grid-template-rows
grid-template-columns: 200px 1fr 2fr; /* Fixed + fractional */
grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Responsive */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Responsive, collapse empty */
grid-template-rows: 60px 1fr auto; /* Header, main, footer */
grid-template-areas
.container {
grid-template-areas:
"header header header"
"sidebar content content"
"footer footer footer";
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer { grid-area: footer; }
gap
gap: 16px; /* Row and column gap */
row-gap: 16px;
column-gap: 8px;
gap: 16px 8px; /* row-gap column-gap */
grid-auto-flow
| Value | Description |
|---|
row | Fill rows first (default) |
column | Fill columns first |
dense | Fill gaps with smaller items |
row dense | Row-first with dense packing |
grid-auto-rows / grid-auto-columns
grid-auto-rows: 100px; /* Implicit row height */
grid-auto-rows: minmax(100px, auto); /* Min 100px, grow to fit */
grid-auto-columns: 1fr;
justify-items / align-items (cell alignment)
| Value | Description |
|---|
stretch | Stretch to fill cell (default) |
start | Align to start of cell |
end | Align to end of cell |
center | Center in cell |
justify-content / align-content (grid in container)
| Value | Description |
|---|
start | Pack grid to start |
end | Pack grid to end |
center | Center grid |
stretch | Stretch to fill container |
space-between | Even space between tracks |
space-around | Even space around tracks |
space-evenly | Equal space between and around |
place-items / place-content (shorthands)
place-items: center; /* align-items + justify-items */
place-content: center; /* align-content + justify-content */
Item Properties
grid-column / grid-row
grid-column: 1 / 3; /* Start at line 1, end at line 3 */
grid-column: 1 / span 2; /* Start at line 1, span 2 columns */
grid-column: 1 / -1; /* Span full width */
grid-row: 2 / 4;
grid-area
grid-area: header; /* Named area */
grid-area: 1 / 1 / 3 / 4; /* row-start / col-start / row-end / col-end */
justify-self / align-self
justify-self: center; /* Horizontal alignment in cell */
align-self: end; /* Vertical alignment in cell */
place-self: center end; /* align-self + justify-self */
Sizing Functions
| Function | Description |
|---|
fr | Fraction of available space |
minmax(min, max) | Between min and max size |
min-content | Smallest size without overflow |
max-content | Size to fit content in one line |
auto | Determined by content and constraints |
fit-content(max) | Clamp to max, shrink to content |
Named Lines
grid-template-columns: [start] 1fr [content-start] 2fr [content-end] 1fr [end];
.item { grid-column: content-start / content-end; }
Common Layouts
Basic page layout
.page {
display: grid;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
}
Responsive card grid
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
}
.layout {
display: grid;
grid-template-columns: 250px 1fr;
gap: 16px;
}
Full-bleed layout
.layout {
display: grid;
grid-template-columns: 1fr min(65ch, 100%) 1fr;
}
.layout > * { grid-column: 2; }
.layout > .full-bleed { grid-column: 1 / -1; }
Centering
.container {
display: grid;
place-items: center;
}
Pancake stack
.stack {
display: grid;
grid-template-rows: auto 1fr auto;
}