Percentage based grids and gaps grid-auto-flow

Demonstrating the difference between the auto-fill and auto-fit keywords.

In the first example, we use the auto-fill keyword for repeat. We get as many tracks with a minimum of 200px and maximum of 1fr as will fit in the container.

Credit to gridbyexample.com for inspiring this example.

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

1

2

3

In the second example we use the auto-fit keyword for repeat. We get as many tracks with a minimum of 200px and maximum of 1fr as will fit in the container.

After auto-placement any empty tracks are collapsed to 0. So our items can expand to take up the remaining space.

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

1

2

3