CSS Grid is a 2D layout system — control rows AND columns simultaneously. Define tracks with grid-template-columns and grid-template-rows. Place items explicitly or let auto-placement do the work.
| Element / Property | Syntax / Values | Description |
|---|---|---|
| display: grid | display: grid | Enable grid layout on container |
| grid-template-columns | repeat(3, 1fr) / repeat(auto-fit, minmax(200px,1fr)) | Define column tracks |
| grid-template-rows | auto / 60px 1fr auto | Define row tracks |
| grid-template-areas | 'header header' 'nav main' 'footer footer' | Named template areas |
| fr unit | 1fr / 2fr | Fractional unit — proportional remaining space |
| repeat() | repeat(3, 1fr) / repeat(auto-fit, minmax(250px,1fr)) | Repeat track pattern |
| minmax() | minmax(200px, 1fr) | Track size between min and max |
| auto-fit | repeat(auto-fit, minmax(200px,1fr)) | Fill with as many tracks as fit, stretch |
| auto-fill | repeat(auto-fill, minmax(200px,1fr)) | Fill with as many tracks as fit, keep empties |
| gap | gap: 16px / column-gap: 24px / row-gap: 12px | Gaps between tracks |
| grid-column | grid-column: 1 / 3 / span 2 | Column start/end or span |
| grid-row | grid-row: 1 / 3 / span 2 | Row start/end or span |
| grid-area | grid-area: header | Place in named area |
| grid-area (shorthand) | grid-area: row-start / col-start / row-end / col-end | Placement shorthand |
| justify-items | start | center | end | stretch | Horizontal alignment of all cells |
| align-items | start | center | end | stretch | Vertical alignment of all cells |
| place-items | center / start stretch | Shorthand for align-items + justify-items |
| justify-self | start | center | end | stretch | Horizontal alignment of one cell |
| align-self | start | center | end | stretch | Vertical alignment of one cell |
| justify-content | start | center | end | space-between | Horizontal alignment of tracks |
| align-content | start | center | end | space-between | Vertical alignment of tracks |
| grid-auto-flow | row | column | dense | How auto-placed items flow |
| grid-auto-columns/rows | auto / 1fr / 200px | Size of implicitly created tracks |
| subgrid | grid-template-columns: subgrid | Child grid aligned to parent grid tracks (CSS Grid Level 2) |
Save as .html or .css and open in any browser.
/* CSS Grid — Complete Layout Example */
/* ── Full page layout ───────────────────────────────────────── */
.site {
display: grid;
grid-template-areas:
"header header header"
"nav main aside"
"footer footer footer";
grid-template-columns: 200px 1fr 200px;
grid-template-rows: 60px 1fr auto;
min-height: 100vh;
gap: 0;
}
.site-header { grid-area: header; background: #1e293b; padding: 0 24px; display: flex; align-items: center; }
.site-nav { grid-area: nav; background: #0f1f2e; padding: 16px; }
.site-main { grid-area: main; padding: 24px; }
.site-aside { grid-area: aside; background: #0f1f2e; padding: 16px; }
.site-footer { grid-area: footer; background: #1e293b; padding: 16px 24px; text-align: center; }
/* ── Responsive card grid ───────────────────────────────────── */
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}
/* At < 600px: auto-fit collapses to 1 column automatically */
/* ── Dashboard with mixed sizes ─────────────────────────────── */
.dashboard {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: minmax(120px, auto);
gap: 16px;
}
.widget-wide { grid-column: span 2; }
.widget-tall { grid-row: span 2; }
.widget-hero { grid-column: span 4; }
/* ── Photo gallery with masonry-like placement ──────────────── */
.gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 200px;
gap: 8px;
}
.gallery .featured {
grid-column: span 2;
grid-row: span 2;
}
/* ── Responsive without media queries ──────────────────────── */
.auto-grid {
display: grid;
/* Creates as many 250px+ columns as fit, fills remaining space */
grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr));
gap: 16px;
}
/* ── Named lines ────────────────────────────────────────────── */
.content {
display: grid;
grid-template-columns:
[full-start] 1fr
[content-start] min(100%, 700px) [content-end]
1fr [full-end];
}
.content > * { grid-column: content; }
.content > .full-width { grid-column: full; }
/* ── Responsive breakpoints ────────────────────────────────── */
@media (max-width: 900px) {
.site {
grid-template-areas:
"header"
"main"
"aside"
"footer";
grid-template-columns: 1fr;
}
.site-nav { display: none; }
}