如何使我的CSS网格中的最后一个项目以相等的间距拉伸全宽？

问题描述

我是使用CSS网格的新手，偶然发现了一个我无法在线找到答案的问题。我要实现的是7列布局，其余项目的宽度均等地延伸以填充剩余空间。

我尝试使用网上发现的自动填充和自动调整功能，但这不能解决我的问题。我不确定这是否可以在CSS网格中实现，并且我可能必须使用flexBox？

我希望“八”，“九”和“十”拉伸全宽以与上面的行保持一致。

.wrapper {
  display: grid;
  grid-template-columns: repeat(7,1fr);
  grid-auto-rows: auto;
}

* {
  Box-sizing: border-Box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}

.wrapper>div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}

<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
  <div>Six</div>
  <div>Seven</div>
  <div>Eight</div>
  <div>Nine</div>
  <div>Ten</div>
</div>

解决方法

由于以下原因，无法使用网格自动完成：

• Aligning grid items across the entire row/column (like flex items can)
• Place wrapping items in the center of the grid

与这个常见问题相反：

• Equal width flex items even after they wrap

使用flex可能会实现。

.wrapper {
  display: flex;
  flex-wrap: wrap;
}

.wrapper > div {
  flex: 1 0 14%;
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}

* {
  box-sizing: border-box;
}

<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
  <div>Six</div>
  <div>Seven</div>
  <div>Eight</div>
  <div>Nine</div>
  <div>Ten</div>
</div>

,

如果您希望 8、9 和 10 在下方拉伸全宽，那么您可以使用 grid-column 并使这 3 个成为网格的全宽（填充空间）。

向 div 8、9 和 10 添加一个 .stretch 类。

然后就是这样：

.stretch { 网格列：1 / -1 }

简单易行！

我可能会根据问题和小提琴误解布局要求，但这可能会让你得到你想要的......