Multiple tracks in a track-list with auto-fill and minmax() auto-fill vs. auto-fit

A grid with a width of 90%. Six column tracks of 10% each, 5 gutter tracks of 2% each.

The grid-gap property controls columns and rows but as the grid has no height, the row gap resolves to 0.

If we give the grid a height, there is something for 2% to be a percentage of. So we get a gap.

Credit to gridbyexample.com for inspiring this example.

[fl_row] {
    width:90%;
    grid-gap: 2%;
    grid-template-columns: repeat(6, 10%);
    height: 500px; /*second example only*/
}

The grid-gap property controls columns and rows but as the grid has no height, the row gap resolves to 0.

1

2

3

4

5

6

7

8

9

10

11

12

If we give the grid a height, there is something for 2% to be a percentage of. So we get a gap.

1

2

3

4

5

6

7

8

9

10

11

12