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

Question

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

10

.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略大一些。

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

- mpen

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Michael Benjamin · Accepted Answer

你只需要在 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>

以下文章更详细地解释了上述解决方案: