<div class="grid">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="grid2">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
.grid {
display: grid;
grid-template-columns: repeat(3, minmax(1fr, 300px)); /* doesn't work as expected */
grid-template-rows: 50px 50px 50px;
grid-gap: 10px;
margin-bottom: 10px;
}
.grid .item {
background-color: blue;
}
.grid2 {
display: grid;
grid-template-columns: repeat(3, auto); /* totally works! */
grid-template-rows: 50px 50px 50px;
grid-gap: 10px;
}
.grid2 .item {
max-width: 300px;
background-color: blue;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.