CSS Grid Resources

grid.md

Step-by-step

https://learncssgrid.com/

Cheatsheet

http://grid.malven.co/

Containers

grid-template-rows grid-template-columns

Gaps

grid-row-gap grid-column-gap grid-gap

Item

Specify location of the grid item by specifying line

verbose options:

grid-row-start:    2;
grid-row-end:      3;
grid-column-start: 2;
grid-column-end:   3;

This 2-column by 3-row grid results in 3 column lines and 4 row lines. Item 1 was repositioned by row and column line numbers.

If an item spans only one row or column, grid-row/column-end is not necessary.

short-hand 1:

grid-row:    2;
grid-column: 3 / 4;

grid-row is shorthand for grid-row-start and grid-row-end.

grid-column is shorthand for grid-column-start and grid-column-end.

short-hand 2:

grid-area: 2 / 2 / 3 / 3 grid-area is shorthand for grid-row-start, grid-column-start, grid-row-end and grid-column-end.

Naming

grid-template-areas (container properties) put each grid item a name and refer to it later in grid item.

Implicit Grid

grid-auto-rows grid-auto-columns grid-auto-flow