Auto-fit Vs Auto-fill

For responsive CSS Grid layouts, knowing the difference between auto-fit and auto-fill lets you get the behavior you want without media queries.

Auto-Fit

The auto-fit keyword tells the grid to expand items to fill the available space in the container. This spreads items out when there aren't enough to fill all possible columns.

Example Usage:

1.wrapper {
2  display: grid;
3  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
4  grid-gap: 1rem;
5}

Try it out:

Auto-Fill

In contrast, auto-fill keeps the specified item size and reserves empty column spaces instead of expanding items to fill the available space.

Example Usage:

1.wrapper {
2  display: grid;
3  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
4  grid-gap: 1rem;
5}

Try it out:

Key Differences

1. Space Distribution:

   • auto-fit collapses empty tracks and distributes space to existing items
   • auto-fill maintains empty tracks, preserving the intended column size

2. Use Cases:

   • Use auto-fit when you want items to expand and fill the container
   • Use auto-fill when you want to maintain consistent item sizes with potential empty spaces

References

• MDN Web Docs: Grid auto-fit
• MDN Web Docs: Grid auto-fill