Differences between `auto-fill` and `auto-fit`

The difference happens when there are not enough content to fill up all columns.

When the screen is wide enough to fill in more "minmax(200px, 1fr)" columns, auto-fill will fill extra empty 200px width columns.

When it is auto-fit, extra column works only where there is content there. So there won’t be any extra empty columns in auto-fit.

Checkout the following codepen demo for their differences.

https://codepen.io/makzan/pen/dJZXPp?editors=1100

1. Try resizing the browser.
2. Try adding more photos into the container.
3. Try changing the minmax value.