CSS Grid Cheatsheet
Grid is for two-dimensional layout — rows and columns together. These properties define the grid on the container and place items within it.
Define the grid
Make an element a grid container.
Two equal-width columns.
Define row sizes.
Space between rows and columns.
Sizing functions
Three equal columns without repetition.
At least 200px, growing to fill.
Responsive columns with no media queries.
A fraction of the free space.
Place items
Span from line 1 to line 3.
Span two columns from where it starts.
Span rows the same way.
Alignment
Align items horizontally in their cells.
Align items vertically in their cells.
Shorthand for both — perfect centering.