如何防止css-grid中的白色单元格

Question

​

.wrapper{
  margin: 50px auto;
  width: 950px;
  display: grid;
   grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 29.2rem;
    grid-auto-rows: 29.2rem;
    grid-gap: 3rem;
}
.item{
  background-color: green;
  color: #fff;
}
.item.large{
  grid-column: span 2;
  grid-row: span 2
}

<div class="wrapper">
<div class="item">item</div>
<div class="item large">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item large">item</div>
<div class="item">item</div>
</div>

​

您好，请问有没有一种方法，我可以防止网格系统自动有空单元格，无论我创建了多少行？在此示例中，第15项之前有一个空单元格

Answer 1

我想你可能要找的是：

grid-auto-flow: dense;

https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow

您还可以将此样式与row或column配对，具体取决于您的具体需求

​

.wrapper{
  margin: 50px auto;
  width: 950px;
  display: grid;
   grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 29.2rem;
    grid-auto-rows: 29.2rem;
    grid-gap: 3rem;
    grid-auto-flow: dense;
}
.item{
  background-color: green;
  color: #fff;
}
.item.large{
  grid-column: span 2;
  grid-row: span 2
}

<div class="wrapper">
<div class="item">item</div>
<div class="item large">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item large">item</div>
<div class="item">item</div>
</div>

​