如何让项目拉伸以填充宽度？

Question

.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 框的整个宽度？

它们都应该是相同的宽度，并且比 100 像素大一点。

最后一行应该像现在一样左对齐。

Answer 1

您只需在grid-template-columns 规则中添加一个分数单位。

grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));

此规则会创建尽可能多的列以适合容器。

每列的最小宽度为 100px。

最大宽度为1fr，这意味着该列将占用行上的任何可用空间。

现在容器中的所有水平空间都被使用了。

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  grid-auto-rows: 50px;
  grid-gap: 3px;
  border: 1px solid green;
}

.item {
  border: 1px solid red;
}

<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>

这些帖子更详细地解释了上述解决方案：

• Equal width flex items even after they wrap
• The difference between percentage and fr units in CSS Grid Layout