Skip to content

Instantly share code, notes, and snippets.

@Tanapruk
Last active July 20, 2019 12:24
Show Gist options
  • Save Tanapruk/6a89dd48c62edf641d7d7d67c30a65f5 to your computer and use it in GitHub Desktop.
Save Tanapruk/6a89dd48c62edf641d7d7d67c30a65f5 to your computer and use it in GitHub Desktop.
CSS Grid Resources

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment