如何让最后一行的项目占用CSS Grid的剩余空间？

问题描述 投票：0回答：7

有没有办法强制网格最后一行中的所有项目填充该行，无论它们有多少？

我不知道网格中的项目数量，因此我无法直接定位它们。我尝试使用

grid-auto-flow: dense
，但它并没有真正帮助。

这是我的问题可视化： ：

div {
  margin:20px auto;
  width: 400px;
  background: #d8d8d8;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(3, 1fr);
}
span {
  height: 50px;
  background: blue;
}
<div>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>  
</div>

css grid-layout css-grid
7个回答
32
投票

通过结合 CSS 规则 nth-child 和 nth-last-of-type，这对于 CSS 网格来说是完全可能的。唯一需要注意的是，需要提前知道列数。 

.grid {
    display: grid;
    grid-template-columns: auto auto auto;
    justify-items: start;
    grid-gap: 10px;
}

.grid div {
  border: 1px solid #ccc;
  width: 100%;
}

.grid > *:nth-child(3n-1) {
  justify-self: center;
  text-align: center;
}

.grid > *:nth-child(3n) {
  justify-self: end;
  text-align: right;
}

.grid > *:nth-child(3n-1):nth-last-of-type(1) {
  border-color: red;
  grid-column: span 2;
}

.grid > *:nth-child(3n-2):nth-last-of-type(1) {
  border-color: red;
  grid-column: span 3;
}
<div class="grid">
  <div>text</div>
  <div>TEXT</div>
  <div>text</div>
  <div>text</div>
  <div>TEXT</div>
  <div>text</div>
  <div>text</div>
  <div>TEXT</div>
</div>

22
投票

我不认为 CSS 网格是您尝试构建的布局的最佳选择，至少如果它是动态的并且您并不真正知道容器上始终有多少项，则不是。 Flexbox 实际上更适合一维布局；让所有东西保持完全相同的大小并完全根据需要使用所有可用空间可能会有点困难，但最终这种类型的情况就是 Flexbox 的用途。

当然，您也可以通过对 CSS 进行少量计算来利用 100% 宽度。

CSS 网格可能会更好地保持行和列对齐，但这是一个不同的情况。

.container {
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
}

.flex-item {
  width: 30%;
  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="container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
  <div class="flex-item">4</div>
  <div class="flex-item">5</div>
  <div class="flex-item">6</div>
  <div class="flex-item">7</div>
</div>

8
投票

对于那些只为最后一个元素寻找答案的人，如果您使用的是 tailwindcss，可以尝试 

grid-column: 1 / -1;
或 
col-span-full
。

div {
  margin:20px auto;
  width: 400px;
  background: #d8d8d8;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(3, 1fr);
}
span {
  height: 50px;
  background: blue;
}
div > span:last-of-type {
  grid-column: 1 / -1;
}
<div>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>  
</div>

2
投票

这在 CSS Grid 当前版本（级别 1）中是不可能的。不过，使用 Flexbox 并不太复杂。

您在评论中写道：

我正在使用 Flexbox 进行后备。我研究网格的一个（不是唯一）原因是使用“间隙”和它附带的其他功能。例如，尽管间隙可以通过边距来模拟，但由于我们不知道最后一行中的项目数量，因此消除侧面间隙（在容器侧面）将需要额外的代码。

你是对的：CSS Grid 中的

grip-gap

 功能非常方便。但是，您也可以在 Flexbox 中使用边距来模拟行为，而无需太复杂。

div { display: flex; flex-wrap: wrap; padding: 0px 0px 5px 5px; margin: 20px auto; width: 400px; background: #d8d8d8; } span { flex: 1 0 30%; height: 50px; margin-top: 5px; margin-right: 5px; background: blue; }
<div>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

<div>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

<div>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

<div>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

<div>
  <span></span>
  <span></span>
  <span></span>
</div>

<div>
  <span></span>
  <span></span>
</div>

<div>
  <span></span>
</div>





    



      

      
      
      

      

        

          

            

              
2
投票

              
            

          

        

        
您可以尝试使用 
nth-child
 和 
last-of-type
 选择器仅选择多余的项目，最后将最后一个项目扩展到网格中的总列数（使用 
grid-column: 1 / -1
 自动完成）






.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 8px;
  row-gap: 8px;
}

.grid-item {
  background: lightblue;
}

.grid-item:nth-child(2n-1):last-of-type {
  background: coral;
  grid-column: 1 / -1;
}
<div class="grid">
  <div class="grid-item">Item 1</div>
  <div class="grid-item">Item 2</div>
  <div class="grid-item">Item 3</div>
  <div class="grid-item">Item 4</div>
  <div class="grid-item">Item 5</div>
</div>





    



      

      
      
      

      

        

          

            

              
0
投票

              
            

          

        

        
回复晚了。


我尝试组合多个选择器，看看它们是否可以一起工作。


所以只要知道自己有多少列，就可以准备几个组合选择器。




  1. 在这种情况下，我们知道我们想要最后一个孩子。所以我们当然要使用最后一个孩子。
    

    

  2. 但是我们也知道我们有 3 列，所以我们可以尝试使用 nth-child()
    

    

  3. 因此我们可以定义 3 种情况，即该项目是每 3 个中的第一个、每 3 个中的第二个或每 3 个中的第 3 个。 nth-child(3n+1) +2 和 +3。
    

    

  4. 现在为每个案例分配一个网格列：
    

    span:nth-child(3n+1):last-child {grid-column: 1/-1;}
span:nth-child(3n+2):last-child {grid-column: 2/-1;}
span:nth-child(3n+3):last-child {grid-column: 3/-1;}
    

    

    5. 

我喜欢选择器......它有效！






div {
  margin:20px auto;
  width: 400px;
  background: #d8d8d8;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(3, 1fr);
}
span {
  height: 50px;
  background: blue;
}

span:nth-child(3n+1):last-child {grid-column: 1/-1;}
span:nth-child(3n+2):last-child {grid-column: 2/-1;}
span:nth-child(3n+3):last-child {grid-column: 3/-1;}
<div>
  <span></span>
  <span></span>
  <span></span>
  <span></span>  
</div>
 
 <div>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>  
</div>

<div>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>  
</div>
 





    



      

      
      
      

      

        

          

            

              
-3
投票

              
            

          

        

        
我找到了您问题的答案，并将其复制在这里：

https://jsfiddle.net/nmcobalt/dg3mutwv/13/

为了让 css 不那么复杂并解决这个复杂的问题，建议使用 SCSS* 而不是普通的 css。


在 SCSS 文件中，您必须使用 css 选择器 
nth:last-child ，并根据模函数和 3 列的常数因子迭代计算子级。

@mixin setLastChildFluid{
  @for $i from 1 through 10 {    
    $span: 3;
    @if $i % 3 == 0{
      $span: 1;
    } @else if $i % 3 == 1{
      $span: 3;
    } @else if $i % 3 == 2{
      $span: 2;
    } 
    @if $span == 2 {
      span:nth-child(#{$i - 1}){
        &:nth-last-child(2){
          grid-column-end:span 1;
          position:relative;
          bottom:0;
          width:calc(150% + 5px);
          left:0;    
        }
      }
      span:nth-child(#{$i}){
        &:nth-last-child(1){
          grid-column-start:2;
          position:relative;
          bottom:0;
          width:calc(150% + 5px);
          left:calc(50% + 5px);
        }
      }
      
    } @else {
      span:nth-child(#{$i}){
        &:last-child{
            grid-column-end:span #{$span};          
        }
      }
    }
    
  }
}
div {
  position:relative;
  margin:20px auto;
  width: 400px;
  background: #d8d8d8;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(3, 1fr);
  
  @include setLastChildFluid;
}
span {
  height: 50px;
  background: blue;
  color:yellow;
}

以及以下 html 标记；我做了两个不同的示例（用 div 包装）来重现您的查询：


<div>
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>
  <span>6</span>
  <span>7</span>
  <span>8</span>
</div>
<div>
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>
  <span>6</span>
  <span>7</span>
</div>

更改 div 数量以查看流体结果。


*SASS 是一种预处理器脚本语言，可解释或编译为级联样式表 (CSS)。在这里了解更多：
https://sass-lang.com/guide
    



      

      
    

  

  

    
最新问题


  





  

    © www.soinside.com 2019 - 2024. All rights reserved.