Container Properties
.grid { display: grid; /* or inline-grid */ }
| Property | Example | Description |
|---|
| grid-template-columns | 1fr 1fr 1fr | Define column track sizes |
| grid-template-rows | auto 1fr auto | Define row track sizes |
| grid-template-areas | "header header" "sidebar main" | Named layout areas |
| gap / column-gap / row-gap | 16px / 20px 12px | Space between tracks |
| justify-items | start | end | center | stretch | Align items horizontally in their cell |
| align-items | start | end | center | stretch | Align items vertically in their cell |
| place-items | center / center | Shorthand: align-items / justify-items |
| grid-auto-flow | row | column | dense | How auto-placed items flow |
Item Placement
/* Place by line numbers */
.item {
grid-column: 1 / 3; /* start at line 1, end at line 3 */
grid-row: 2 / 4;
}
/* Shorthand */
.item { grid-column: span 2; } /* span 2 columns */
.item { grid-area: 1 / 1 / 3 / 4; } /* row-start/col-start/row-end/col-end */
/* Named area */
.header { grid-area: header; }
fr Units & auto-fill
/* fr = fraction of remaining space */
grid-template-columns: 1fr 2fr 1fr; /* 25% | 50% | 25% */
/* auto-fill: create as many columns as fit */
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
/* auto-fit: like auto-fill but collapses empty tracks */
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
/* Fixed + flexible */
grid-template-columns: 260px 1fr; /* sidebar + main */
Grid Template Areas
.layout {
display: grid;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
grid-template-columns: 260px 1fr;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
}
header { grid-area: header; }
.sidebar { grid-area: sidebar; }
main { grid-area: main; }
footer { grid-area: footer; }
Common Patterns
/* Responsive card grid */
.cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 16px;
}
/* Holy grail layout */
.page {
display: grid;
grid-template: "header" auto "main" 1fr "footer" auto / 1fr;
}
/* Perfect center */
.hero { display: grid; place-items: center; min-height: 100vh; }