Using grid-template with repeat and fr (fractions)
Using grid-column: 1 / -1 to span entire width
Using grid-template-areas
Using auto-fit and minmax (only 2 top rows explicitly defined so below rows are implicitly created so height is differnt for them)
1
2
3
4
5
6
7
8
9
10
11
12
13
Using grid-auto-rows which defines for all rows (fixing above issue with height and making all rows have correct height)
1
2
3
4
5
6
7
8
9
10
11
12
13
Using grid-auto-flow: dense to fill move together all elements. It fills from left to right, top to bottom and sticks in what it can (change width of < body > to see how things change)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
Named Lines
justify-content and align-content.
justify-items and align-items.
auto-fit vs auto-fill.
AUTO-FIT
AUTO-FILL