Auto-Fit vs Auto-Fill
The auto-fit and auto-fill keywords are used when creating an implicit grid; however, the difference between the two can be confusing.
Auto-fit will collapse extra space at the end of the row and then distribute that space among the existing items. Auto-fill, however, will not collapse and distribute the extra space.
An example makes this much easier to see!
Auto-Fit
1
2
3
4
5
Auto-fit collapses the extra columns at the end and then distributes the extra space among items.
Auto-Fill
1
2
3
4
5
auto-fill creates the columms just like auto-fit; however auto-fill does not collapse the empty columns.
Auto-Fit
HTML
<h2>Auto-Fit</h2>
<div class="container1">
<div class="item1">1</div>
<div class="item1">2</div>
<div class="item1">3</div>
<div class="item1">4</div>
<div class="item1">5</div>
</div>
CSS
.container1 {
background-color: blue;
outline: thin solid black;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
grid-gap: 5px;
justify-content: start;
align-content: start;
justify-items: start;
align-content: start;
}
.item1 {
height: 100%;
width: 100%;
background-color: white;
outline: thin dashed black;
display: flex;
align-items: center;
justify-content: center;
}
Auto-Fill
HTML
<div class="container2">
<div class="item1">1</div>
<div class="item1">2</div>
<div class="item1">3</div>
<div class="item1">4</div>
<div class="item1">5</div>
</div>
CSS
.container2 {
background-color: blue;
outline: thin solid black;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
grid-gap: 5px;
justify-content: start;
align-content: start;
justify-items: start;
align-content: start;
}
.item1 {
height: 100%;
width: 100%;
background-color: white;
outline: thin dashed black;
display: flex;
align-items: center;
justify-content: center;
}
