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.

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.

Comments

no comments yet.