Actually, I’m confused about what is the difference between auto-fill and auto-fit. If anyone knows, please let me know.:D
About the differences between auto-fill and auto-fit, I agree it’s tricky to remember. As much for myself as for anyone else, I’ve tried to write down an explanation:
Auto-fill: trying to fill the container with as many tracks as possible.
grid-template-columns: repeat(auto-fill, 200px);
If the width is set to a specific value like for example 200px, there might be a gap at the end of the row since the last item won’t fit and that item will be placed on a second row.
If one would like the items to be at least 200px, but take up remaining space distributed evenly among them in order to prevent gaps, one can use grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
However, when the grid container gets wider, there might still be a gap at the end of the row because the grid is being filled up with generated tracks.
Auto-fit: tries to fit items into the container. grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); the items will always stretch to make use of the full width of the container, and be at least 200px wide.
grid-template-columns: repeat(auto-fit, 200px); yields a very similar layout to its auto-fill counterpart, however no extra tracks are being created.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Thanks for the great article!
About the differences between auto-fill and auto-fit, I agree it’s tricky to remember. As much for myself as for anyone else, I’ve tried to write down an explanation:
Auto-fill: trying to fill the container with as many tracks as possible.
grid-template-columns: repeat(auto-fill, 200px);If the width is set to a specific value like for example 200px, there might be a gap at the end of the row since the last item won’t fit and that item will be placed on a second row.
If one would like the items to be at least 200px, but take up remaining space distributed evenly among them in order to prevent gaps, one can use
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));However, when the grid container gets wider, there might still be a gap at the end of the row because the grid is being filled up with generated tracks.
Auto-fit: tries to fit items into the container.
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));the items will always stretch to make use of the full width of the container, and be at least 200px wide.grid-template-columns: repeat(auto-fit, 200px);yields a very similar layout to its auto-fill counterpart, however no extra tracks are being created.