Back to Cheat Sheets
Cheat Sheets/CSS Grid Visual Guide
css

CSS Grid Visual Guide

Complete CSS Grid layout reference

CSSGridLayout
Container Properties
display: grid
display: grid;

Enable grid on container

grid-template-columns
grid-template-columns: repeat(3, 1fr);

Define column tracks

grid-template-rows
grid-template-rows: auto 1fr auto;

Define row tracks

gap
gap: 16px;

Space between grid items

grid-area
grid-template-areas: "header header" "sidebar main" "footer footer";

Named grid areas

Item Properties
grid-column
grid-column: 1 / 3;

Span across columns

grid-row
grid-row: 1 / span 2;

Span across rows

grid-area
grid-area: header;

Place in named area

justify-self
justify-self: center;

Align within cell (horizontal)

align-self
align-self: end;

Align within cell (vertical)