What is the difference between auto-fill and auto-fit?

by

The key is to use auto-fill instead of auto-fit.

When the repeat() function is set to auto-fit or auto-fill, the grid container creates as many grid tracks (columns/rows) as possible without overflowing the container.

Note that as the grid container is being rendered, the presence of grid items is irrelevant. The container just lays out the columns and rows as instructed, creating grid cells. It doesn’t care if the cells are occupied or unoccupied.

With auto-fit, when there are not enough grid items to fill the number of tracks created, those empty tracks are collapsed.

Taking your code as an example, when there aren’t enough grid items to fill all the columns in the row, those empty columns are collapsed. The space that was used by the empty columns becomes free space, which is then evenly distributed among existing items. By absorbing the free space, the items grow to fill the entire row.

With auto-fill, everything is the same as auto-fit, except empty tracks are not collapsed. They are preserved. Basically, the grid layout remains fixed, with or without items.

That’s the only difference between auto-fill and auto-fit.

Here’s an illustration of three grid items with auto-fill:

grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));

enter image description here

Here’s an illustration of three grid items with auto-fit:

grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));

enter image description here

spec reference: https://www.w3.org/TR/css3-grid-layout/#auto-repeat

More Related Contents:

  1. Why aren’t my grid-template-areas with ASCII art not working?
  2. Why does minmax(0, 1fr) work for long elements while 1fr doesn’t?
  3. Aligning grid items across the entire row/column (like flex items can)
  4. Equal height rows in CSS Grid Layout
  5. Browser support for CSS Grid
  6. The difference between percentage and fr units
  7. Why are CSS named grid areas not in quotes?
  8. What is difference between justify-self, justify-items and justify-content in CSS grid?
  9. A grid layout with responsive squares
  10. Create a Masonry grid with flexbox (or other CSS)
  11. Why percentage value within grid-gap create overflow in CSS grid?
  12. Using CSS transitions in CSS Grid Layout
  13. How can I make a div span multiple rows and columns in a grid?
  14. What is the difference between align-items vs. align-content in Grid Layout?
  15. Equal height of elements inside grid item with CSS grid layout
  16. How to make a column span full width when a second column is not there? (CSS Grid)
  17. Why does a grid-area name absent in grid-template-areas create additional tracks?
  18. Is there a “subgrid” feature, to position “grandchildren” of a grid container?
  19. Percentage padding / margin on grid item ignored in Firefox
  20. CSS Grid auto fit with max-content
  21. How do you collapse unused row in a CSS grid?
  22. Can flex items wrap in a container with dynamic height?
  23. Can I make a CSS grid with dynamic number of rows or columns?
  24. Flexbox: flex-start/flex-end, self-start/self-end, and start/end; What’s the difference?
  25. How is “grid-template-rows: auto auto 1fr auto” interpreted?
  26. How can I force this CSS grid to wrap to a new line without specifying minmax sizes?
  27. grid-area does not seem to work with the attr function, is this by design?
  28. How to center content and make the background cover the full column when using CSS Grid?
  29. Getting columns to wrap in CSS Grid
  30. Why doesn’t min-content work with auto-fill or auto-fit?

Leave a Comment