如何让物品伸展到填充宽度？

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

它们的宽度应该相同，并且比 100px 大一点。

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

Answer 1

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

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

此规则会创建适合容器的所有列。

每列的最小宽度为 100px。

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

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

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

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

如何让物品伸展到填充宽度？

How to get items to stretch to fill width?

css

grid-layout

css-grid