.container {
display: grid;
grid-template-columns: repeat(auto-fill, 100px);
grid-gap: 3px;
border: 1px solid green;
}
.item {
border: 1px solid red;
height: 50px;
}
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
我该如何拉伸红色item
框,以便它们填满整个绿色container
框?
它们应该都是相同的宽度,并且比100px略大一些。
最后一行应该像现在一样左对齐。
overflow: hidden
?无论如何..没关系,这很完美。再次感谢! - mpen