Multiple tracks in a track-list with auto-fill Percentage based grids and gaps

The repeat syntax can take a track-list rather than a single value, this means you can repeat a more complex track-list. You can use minmax() in this track list, here I am making the max of my larger tracks 2fr, and the smaller ones 1fr. This means that the larger tracks will have more of any leftover space assigned.

Currently does not work in Firefox

Credit to gridbyexample.com for inspiring this example.

[fl_row] {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(100px,1fr) minmax(200px,2fr));
}

1

2

3

4

5

6

7

8

9

10

11

12