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
Checkout the following codepen demo for their differences.
- Try resizing the browser.
- Try adding more photos into the container.
- Try changing the