Difference between autofit and autofill # 06

 auto-fit

With autofit when there are not enough grid items to fill the number of tracks created, the created empty tracks are collapsed. It happens for the first row but not for the other rows.

autofit basically doesn’t depend on grid content. The grid cells or columns will grab the entire viewport.

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

auto-fill

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

auto-fill depends on the grid content. The grid or columns will not grab the entire viewport.

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

Previous PostNext Post