包装css网格并拉伸一个网格项以占据所有空列 [英] Wrapping css grid and streching one grid item to take up all empty columns

查看：25
本文介绍了包装css网格并拉伸一个网格项以占据所有空列的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我试图让最后一个网格项目填充具有自动适应包装项目的 css 网格中的所有空列.

我已阅读展开一个 div 以填充剩余宽度 和 使最后一个元素取剩余宽度与包装(和 IE9 支持)，但他们没有回答动态包装网格的情况，这里是重要的部分，因为它们是为 float 和 显示:块.

例如，如果网格项被换行，我希望它拉伸以占据所有空白空间.

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

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

* {box-sizing: 边框框；}.grid-container {显示:网格；网格模板列:重复(自动适应，minmax(100px，1fr))；}.grid-element {背景颜色:深粉色；填充:20px；颜色:#fff;边框:1px 实心 #fff;}.grid-element:last-of-type {/*width: 100vw;*//* 有没有更好的方法?*/}身体 {填充:2em；}小时{边距:80px；}

<div class="grid-element">1
<div class="grid-element">2

<div class="grid-element">3

<div class="grid-element">4

<div class="grid-element">5

<div class="grid-element">6

<div class="grid-element">7

解决方案

可以通过 display: flex 来实现.另外需要用到flex-grow属性.

正如 mdn 所说的 flex-grow:

<块引用>

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

* {box-sizing: 边框框；}.flex 容器 {显示:弹性；flex-wrap: 包裹;}.flex 元素 {宽度:10%；边框:1px 实心 #000；弹性增长:1；最小高度:120px；box-sizing: 边框框；边距:0 5px 10px；对齐内容:间隔；文本对齐:居中；}

<div class="flex-element">1
<div class="flex-element">2

<div class="flex-element">3

<div class="flex-element">4

<div class="flex-element">5

<div class="flex-element">6

<div class="flex-element">7

I'm trying to make the last grid item fill all empty columns in a css grid that has auto-fit for wrapping items.

I've read Expand a div to fill the remaining width and Make last element take remaining width with wrapping (and with IE9 support), but they don't answer the case of the dynamically wrapping grid that is here the important part since they are made for float and display: block.

So for example if the grid-item is wrapped in a new line i want it to stretch for taking all the empty space.

If you look at the code then the div number 7 should always take all the empty space in the row. I've managed to hack something which dosen't seem robust enough, using 100vw is there a better way?

For the following example: resize the window to see the items wrap into the next lines:

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

解决方案

It can be achieved with display: flex. In addition, it is necessary to use flex-grow property.

As mdn says about flex-grow:

The flex-grow CSS property sets the flex grow factor of a flex item's main size

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

这篇关于包装css网格并拉伸一个网格项以占据所有空列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆