包装css网格并拉伸一个网格项以占用所有空列[重复]

Posted 2023-03-06

【中文标题】包装css网格并拉伸一个网格项以占用所有空列[重复]

【英文标题】：Wrapping css grid and streching one grid item to take up all empty columns [duplicate]

【发布时间】：2021-07-17 01:23:15

【问题描述】：

我正在尝试让最后一个网格项填充 CSS 网格中的所有空列，该网格具有自动适合包装项的功能。

我读过Expand a div to fill the remaining width 和Make last element take remaining width with wrapping (and with IE9 support)，但他们没有回答动态包装网格的情况，因为它们是为float 和display: block 制作的，因为它们是这里的重要部分。

因此，例如，如果网格项被包裹在一个新行中，我希望它伸展以占用所有空白空间。

如果您查看代码，那么 7 号 div 应该始终占据行中的所有空白空间。我已经设法破解了一些看起来不够强大的东西，使用 100vw 有没有更好的方法？

对于以下示例：调整窗口大小以查看项目换行到下一行：

* 
  box-sizing: border-box;


.grid-container 
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));


.grid-element 
  background-color: deepPink;
  padding: 20px;
  color: #fff;
  border: 1px solid #fff;


.grid-element:last-of-type 
  /*width: 100vw;*/ /* Is there a better way? */


body 
  padding: 2em;


hr 
  margin: 80px;

<div class="grid-container">
  <div class="grid-element">
    1
  </div>
  <div class="grid-element">
    2
  </div>
  <div class="grid-element">
    3
  </div>
  <div class="grid-element">
    4
  </div>
  <div class="grid-element">
    5
  </div>
  <div class="grid-element">
    6
  </div>
  <div class="grid-element">
    7
  </div>
</div>

【问题讨论】：

用 CSS-Grid 真的不可能，你需要 flexbox

同意上述观点，但链接如下：css-tricks.com/snippets/css/a-guide-to-flexbox/…

你能给出灵活的答案吗？

不幸的是，问题已关闭，尽管它是 NO 重复的，因为链接的问题没有回答包装项目的情况。但是我每次尝试重新打开错误的已关闭问题都没有成功......

@biberman 如果您认为某个问题未正确关闭，请将其发布到*** Meta。在 cmets 中投诉不会重新提出问题。

【参考方案1】：

可以通过display: flex来实现。另外，需要使用flex-grow属性。

As mdn says about flex-grow:

flex-grow CSS 属性设置 flex 项目的 flex 增长因子 主要尺寸

* 
  box-sizing: border-box;


.flex-container 
  display: flex;
  flex-wrap: wrap;


.flex-element 
  width: 10%;
  border: 1px solid #000;
  flex-grow: 1;
  min-height: 120px;
  box-sizing: border-box;
  margin: 0 5px 10px;
  justify-content: space-between;
  text-align: center;

<div class="flex-container">
    <div class="flex-element">
      1
    </div>
    <div class="flex-element">
      2
    </div>
    <div class="flex-element">
      3
    </div>
    <div class="flex-element">
      4
    </div>
    <div class="flex-element">
      5
    </div>
    <div class="flex-element">
      6
    </div>
    <div class="flex-element">
      7
    </div>
  </div>

【讨论】：

这不是问题的答案，因为 OP 希望自动适应包装物品。

@biberman 它会自动适应容器。作者可以设置想要的width，它会自动适应容器。

但它不像问题中的可重现示例那样包装。 @StepUp 试试看：以全页模式打开并调整窗口大小...

@biberman 我刚刚编辑了宽度，它看起来像换行了，请看我更新的答案

Aw: @StepUp 是的，你是对的，但你最后一行中的所有项目都会增长，而不仅仅是 div 数字 7...