Question

＆＃13;

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

＆＃13;

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

＆＃13;

如何稍微拉伸红色item框以填充绿色container框的整个宽度？

它们应该都是相同的宽度，并且大于100px。

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

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>

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

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

1 个答案: