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

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,表示该列将消耗该行上的任何可用空间.

现在正在使用容器中的所有水平空间.

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

这些帖子更详细地解释了上面的解决方案:

• 即使在包裹后,也可以弯曲相同宽度的物品
• CSS网格布局中百分比和fr单位之间的差异