Grid Cheatsheet

grid-template-rows

1
2
3
4
1.container {
2  display: grid;
3  grid-template-columns: ;
4  grid-template-rows: ;
5}
6
7
8
9

grid-template-columns

1
2
3
1.container {
2  display: grid;
3  grid-template-columns: ;
4}
5
6
7
8

gap

1
2
3
4
5
6
7
8
9
1.container {
2  display: grid;
3  grid-template-columns: ;
4  gap: ;
5}
6
7
8
9

row-column, start-end

1
2
3
4
5
6
7
8
9
1.container {
2  display: grid;
3  grid-template-columns: ;
4}
5
6.item1 {
7  grid-column-start: ;
8  grid-column-end: ;
9}
10
11
12
13

grid-area

grid1
grid2
grid3
grid4
grid5
grid6
grid7
1.container {
2  display: grid;
3  grid-template-columns: ;
4  grid-template-rows: ;
5}
6
7.item1 {
8  grid-area: ;
9}
10
11.item2 {
12  grid-area: ;
13}
14
15
16
17

grid-template-areas

header
main
sidebar
footer
1.container {
2  display: grid;
3  grid-template-columns: ;
4  grid-template-rows: ;
5  grid-template-areas:
6    
7    
8    ;
9}
10
11.item1 {
12  grid-area: ;
13}
14
15.item2 {
16  grid-area: ;
17}
18
19.item3 {
20  grid-area: ;
21}
22
23.item4 {
24  grid-area: ;
25}
26
27
28
29