Consider the code snippet provided. According to my understanding, the columns in this grid are set to be a minimum of 150 pixels wide and maximum of "1 fraction" of the container width.
My question is, how does the grid determine when to add more columns? Following this logic, wouldn't it always result in a single column that occupies 100% of the container width?
main {
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.item {
background: #07c;
height: 150px;
}<main>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</main>