如何使我的CSS网格中的最后一个项目以相等的间距拉伸全宽? [英] How to make the last items in my CSS grid stretch full width with equal spacing?

问题描述

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

I am new to using CSS grid and have stumbled across a problem that I can't find an answer online. What I am trying to achieve is a 7 column layout, and the remaining items to stretch in width equally to fill up the remaining space.

我尝试使用自动填充&am​​p;我在网上发现了自动拟合功能，但这并不能解决我的问题.我不确定这是否可以在CSS网格中实现，并且我可能必须使用flexbox?

I have attempted to use auto-fill & auto-fit as I found online, but this didn't tackle my problem. I am not sure if this can be achieved in CSS grid and I may have to use flexbox?

我想要八个"，九个"和十"拉伸整个宽度使其与上面的行一致.

I would like "Eight", "Nine" and "Ten" to stretch full width to be inline with the row above.

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

推荐答案

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

Can't be done automatically with grid for these reasons:

• 在整个行/列中对齐网格项目(例如弹性项目可以)
• 将包装物品放在网格中心

与这个常见问题相反:

• 等宽的flex项即使包装后也是如此

使用flex可能是可行的.

May be possible with 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>

这篇关于如何使我的CSS网格中的最后一个项目以相等的间距拉伸全宽?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！