GRID CONTAINER

GRID ITEMS
GRID ITEMS
GRID ITEMS
GRID ITEMS
GRID ITEMS
GRID ITEMS
GRID ITEMS
GRID ITEMS
GRID CONTAINER:

grid-template-(column/row) | defines how many columns/rows
there will be in the implicit grid and the size of each one

grid-auto-(column/row) | defines how many columns/rows
there will be in the explicit grid and the size of each one

gap | defines the space between grid rows and columns

align-(items/content) ↕ | aligns items/content relative to the vertical axis

justify-(items/content) ←→ | justify items/content relative to the horizontal axis

GRID ITEMS:

grid-row-(start/end) && grid-column-(start/end)
defines the start/end area of a grid item

1: grid-template column/row
and
align items/content

grid-template-column: auto auto auto auto
grid-template-row: 50px 50px
align-items: ↕ stretch (default)
align-content: ↕ start (default)
A
B
C
D
E
F
align-items: ↕ start
A
B
C
D
E
F
align-items: ↕ center
A
B
C
D
E
F
align-items: ↕ end
A
B
C
D
E
F
align-content: ↕ center
A
B
C
D
E
F
align-content: ↕ end
A
B
C
D
E
F
align-content: ↕ space-between
A
B
C
D
E
F
align-content: ↕ space-evenly
A
B
C
D
E
F
align-content: ↕ space-around
A
B
C
D
E
F
align-content: ↕ strech
when grid-template-row is set to: auto
A
B
C
D
E
F

2: grid-template column/row
and
justify items/content

grid-template-column: 80px 80px 80px
grid-template-row: 50px 50px
justify-items: ←→ stretch (default)
justify-content: ←→ start (default)
A
B
C
D
E
justify-content: ←→ center
A
B
C
D
E
justify-content: ←→ end
A
B
C
D
E
justify-content: ←→ space-between
A
B
C
D
E
justify-content: ←→ space-evenly
A
B
C
D
E
justify-content: ←→ space-around
A
B
C
D
E
justify-content: ←→ strech
when grid-template-column is set to: auto
A
B
C
D
E
F

3: grid-auto column/row

grid-template-column: 80px 80px 80px
grid-template-row: 50px 50px
A
B
C
D
E
F
G
grid-template-column: 80px 80px 80px
grid-template-row: 50px 50px
grid-auto-rows: 50px 50px
A
B
C
D
E
F
G

4: shorthand to align

align-items: ↕ stretch
justify-items: ↕ center
align-content: ←→ start
justify-content: ←→ end
A
B
C
D
E
F
place-items: ↕ stretch center
place-content: ←→ start end
A
B
C
D
E
F

4: shorthand to grid-template + function repeat()

grid-template-columns: repeat(3, 80px)
grid-template-rows: repeat(2, 50px)
A
B
C
D
E
F
grid-template: repeat(2, 50px) / repeat(3, 80px)
* rows first
A
B
C
D
E
F

5: measures and fraction (fr)

grid-template: repeat(2, 50px) / repeat(3, 1fr)
A
B
C
D
E
F
grid-template: repeat(2, 50px) / repeat(3, 1fr) 2fr
total container: 500px
A 94.4px
B 94.4px
C 94.4px
D 192.8px
E 94.4px
F 94.4px
grid-template: repeat(2, 50px) / 90px 30% 1fr 1fr
total container: 500px
  1. 90px

  2. 30% of 500px -> 150px

  3. column 3 and 4:
    500px - 90px - 150px = 260px
    1fr + 1fr = 260px / 2
A
90px
B
150px
C (1fr)
130px
D (1fr)
130px
E
90px
F
150px

6: grid area

grid-template: repeat(3, 1fr) / repeat(3, 1fr)

shorthand grid area:
(row start) / (column start) / (row end) / (column end)

grid area:
A:   1 / 1 / 2 / 3
B:
1 / -2 / -1 / -1
C:   2 / 1 / -1 / -2