Overall it looks better, but suddenly photos are hiding behind a horrible horizontal scroll. What we want is for images to move to the next row once they no longer fit (in this case, when there’s no longer 200px available on that row). Then, once an image passes to the row bellow, have all images stretch to occupy the newly available space.

Sounds like we have some work to do with percentages and media-queries!

Here’s the good news: Grid has magic words that do all that for you! 🙌 Instead of specifying a finite number of columns, we can define sizing properties for the tracks and let the grid calculate how many fit the available space. If you’ve never heard about auto-fill and auto-fit, prepare yourself because you’re about to fall in love. 💕

auto-fill

With a given minimum track size, the number of track repetitions is the largest possible that does not cause the grid to overflow the container. auto-fit

Initial behaviour is the same as auto-fill.

After all items are placed, if there are any empty tracks, those tracks are collapsed. This means those tracks are treated as having a track sizing function of 0px and the gutters (or any other automatic spacings) around them are collapsed as well.

What this means, in practical terms, is: if you use auto-fill as the repetition number, you can end-up with empty tracks, because it will create as many tracks as possible in the available space. If you use auto-fit, those empty tracks disappear, allowing the others to expand and occupy the remaining space.