auto-fill vs. auto-fit Using nth-child() to set up your grid-area

In this example, I am creating a grid that contains as many 100 pixel column tracks as will fit into the container with the remaining space shared equally between the columns. In the minmax() function the first value is the minimum size I want my tracks to be, the second is the maximum. By using 1fr as the maximum value, the space is equally distributed.

I am then spanning columns and rows. As the items are auto-placed on our flexible grid they will move around the grid but maintain their spanned size.

This is similar to Example 29, but I'm taking it one step further. I also added the grid-auto-flow: dense; property. This will allow the grid to automatically fill in the gaps that would normally exist if the next grid item didn't fit. 

[fl_row] {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    grid-auto-rows: 75px;
    grid-auto-flow: dense;
}
[fl_row] .horizontal {
    grid-column: span 2;
}
[fl_row] .vertical {
    grid-row: span 2;
}
[fl_row] .big {
    grid-column: span 2;
    grid-row: span 2;
}

A

B

C

D

E

F

G

H

I

J

K

L

M

N

O

P

Q

R

S

T

U

V

W

X

Y

Z

1

2

3

4

5

6

7

8

9

10