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

Thomas Mak wrote at 2018-01-06.

#css #css-grid

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.

demo of auto-fit vs auto-fill

Checkout the following codepen demo for their differences.


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


no comments yet.