Auto-fit Vs Auto-fill

When using Grid to create a responsive grid layout with repeat() and minmax() functions, it's important to understand the differences between auto-fit or auto-fill

Auto-Fit#

the auto-fit will expand the items to fill the available space within the grid.

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

auto-fit will make items width too wide, especially when items don't fill the columns within a row.

Auto-Fill#

While auto-fill will keep the available space reserved without changing the item width.

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

auto-fill preserves the space within the row and prevents the item from taking up all the available space.

In Short, Auto-fit Fits the entire length of the container. Auto-fill Doesn't fit entire length of the container.