CSS3 Grid

display: grid; # enable grid
grid-template-columns: 1fr 1fr 1fr; # 3 equal columns
grid-template-rows: 100px auto; # row sizes
gap: 20px; # space between items

grid-template-columns: 200px 1fr 2fr; # mixed units
grid-template-columns: repeat(3, 1fr); # repeat pattern
grid-template-columns: auto 1fr auto; # auto sizing

grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer"; # define areas
grid-area: header; # place item in area

grid-column: 1 / 3; # span columns 1-2
grid-row: 1 / 3; # span rows 1-2
grid-column: span 2; # span 2 columns
grid-area: 1 / 1 / 3 / 3; # row-start / col-start / row-end / col-end

justify-items: center; # align items horizontally
align-items: center; # align items vertically
justify-content: center; # align grid horizontally
align-content: center; # align grid vertically