CSS Grid Reference

display: grid; # enable grid
grid-template-columns: 200px 1fr 1fr; # 3 columns
grid-template-rows: auto 100px; # 2 rows
gap: 20px; # spacing between items
row-gap: 10px; # vertical spacing
column-gap: 15px; # horizontal spacing

grid-template-areas:
  "header header header"
  "sidebar main main"
  "footer footer footer"; # layout map

# Assign items to areas
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }

# Position by line numbers
grid-column: 1 / 3; # span columns 1-2
grid-row: 2 / 4; # span rows 2-3

# Named lines
grid-template-columns:
  [start] 1fr [content] 2fr [end];
grid-column: start / content; # use names

grid-template-columns: repeat(3, 1fr); # 3 equal columns
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); # responsive
grid-auto-rows: 100px; # implicit row size
grid-auto-flow: dense; # fill gaps
grid-auto-columns: 1fr; # implicit col size

justify-self: start; # horizontal align item
align-self: center; # vertical align item
justify-items: stretch; # all items horizontal
align-items: end; # all items vertical
place-items: center; # center everything
grid-column: span 2; # span 2 columns