如何使最后一行中的项目消耗CSS网格中的剩余空间？

时间：2019-01-25 18:18:19

标签： css css3 grid-layout css-grid

是否有一种方法可以强制网格的最后一行中的所有项目填满该行，无论它们是多少？

我不知道网格中的项目数量，因此无法直接定位它们。我尝试使用grid-auto-flow: dense，但并没有帮助。

这是我的问题形象化： enter image description here：

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>

5 个答案:

答案 0 :(得分：2)

我不认为CSS Grid是您要构建的布局的最佳选择，至少如果它是动态的并且您真的不知道容器中将有多少个物品，至少不是这样时间。实际上，Flexbox更适合一维布局。要使所有内容保持完全相同的大小并完全按照需要使用所有可用空间可能会有些困难，但是最后这种情况是Flexbox的用途。

当然，通过在CSS上进行少量计算，您也可以使用100％的宽度。

CSS Grid可能最好使行和列保持对齐，但这是另一种情况。

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

答案 1 :(得分：1)

这在current version (Level 1) of CSS Grid中是不可能的。但是，使用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 :(得分：0)

您现在可以尝试并更改n的数量以放置任意数量的span 

var n = 8;
var m =n%3;
var all=n-m;

document.write('<div>' );
 for (var i = 0; i < all; i++) {
      document.write('<span>' + '</span>');
    }
    
if(m==2)  
{ 
document.write(''); 
document.write('<span class="block-a"> </span><!--  -->' + '<br><span class="block-b"> </span>');

}
else  if(m==1) 
{ document.write('<span style=" width: 400px;">' + '</span>');}
document.write('</div>' );
div {
  margin:20px auto;
   margin:20px auto;
  width: 400px;
  background: #d8d8d8;
  display: grid;
  grid-gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
}
span{
  height: 50px;

  background: blue;
}

.block-a{
  width:200px;
  background:blue;
  display: block;
}

.block-b{
  width:151%;
  background:blue;
  display: block;
  margin:0px -65px;

}

答案 3 :(得分：0)

通过结合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>

答案 4 :(得分：0)

我找到了您问题的答案。 您必须使用sass才能使用数学模函数产生效果。 您唯一需要的因素是知道您有多少列。 如果您知道列数，则可以应用sass计算，并且最后一个子元素将始终是流畅的。最终，迭代可以大于10，但是出于示例的考虑，我限制为10 ... 最困难的部分是modulo = 2，这意味着最后一行有2个项目。在此必须更改宽度才能匹配所需的结果。我使用的calc是100％+网格间距的一半。

@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;
}

和标记（为了产生两种情况，我都添加了两个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>

该示例也位于此处： https://jsfiddle.net/nmcobalt/dg3mutwv/13/

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

相关问题
最新问题