.grid { display: grid; grid-template-columns: 200px 1fr 1fr; }Fixed sidebar + two flexible columns.
CSS Grid cheat sheet
CSS Grid defines rows and columns, then places items into them. These are the properties and patterns you reach for most.
17 entries
Defining the grid
grid-template-columns: repeat(3, 1fr);Three equal columns.
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));Responsive columns without media queries.
grid-template-rows: auto 1fr auto;Header, stretching content, footer.
gap: 24px 16px;Row gap, column gap.
grid-auto-rows: minmax(120px, auto);Size for implicitly created rows.
Placing items
.wide { grid-column: 1 / -1; }Span the full width (line 1 to the last line).
.feature { grid-column: span 2; grid-row: span 2; }Span two columns and two rows.
.item { grid-area: 2 / 1 / 3 / 3; }row-start / col-start / row-end / col-end.
grid-auto-flow: dense;Backfill holes left by spanning items.
Named areas
.layout {
display: grid;
grid-template-columns: 220px 1fr;
grid-template-areas:
"head head"
"side main"
"foot foot";
}
header { grid-area: head; }
aside { grid-area: side; }
main { grid-area: main; }
footer { grid-area: foot; }Readable page layout; redefine areas in a media query for mobile.
Alignment
justify-items: start | center | end | stretch;Align items inside their cells horizontally.
align-items: start | center | end | stretch;Vertically.
place-items: center;Both at once: the shortest centering in CSS.
justify-content: space-between;Distribute the whole grid inside the container.
.cell { justify-self: end; align-self: start; }Per item.
Subgrid
.card { display: grid; grid-row: span 3; grid-template-rows: subgrid; }Children align to the parent grid’s rows (all modern browsers).
Frequently asked questions
auto-fit vs auto-fill?
Both create as many columns as fit. auto-fill keeps empty tracks when there are few items; auto-fit collapses them so the existing items stretch to fill the row.
What is the fr unit?
fr is a fraction of the free space left after fixed tracks and gaps. 1fr 2fr gives the second column twice the space of the first.
Should I use Grid or Flexbox?
Use Grid when you want to control rows and columns together (page layouts, galleries). Use Flexbox for a single row or column of items (toolbars, nav bars).