html - CSS 网格在适合它的元素之前留下的空白空间

Question

大家好，我找不到任何有用的示例，因为我从未使用过 CSS 网格，无论如何我将如何用下一个元素填充网格中的空白区域？我的 1fr 元素不适合先前可用的空间。是因为我将类(class)的高度加倍还是什么？就像我说过的，我从未使用过 CSS 网格，但我现在只需要它们，这是我要添加到代码中的最后一件事，你们能帮帮我吗？

#container {
  width: 40%;
  margin-left: 20%;
  margin-bottom: 1rem;
  display: grid;
  float: left;
  grid-template-columns: auto;
}

#container>div:nth-child(1) {
  margin-top: 0 !important;
}

.content-1x,
.content-2x,
.content-3x {
  margin: 1rem 1rem 0 0;
  height: 15rem;
  border-bottom: 1px solid #ddd;
  border-right: 1px solid #ddd;
}

.double-height {
  height: 30rem;
}

.content-3x {
  grid-area: auto / auto / auto / span 3;
}

.content-2x {
  grid-area: auto / auto / auto / span 2;
}

.content-1x {
  grid-area: auto / auto / auto / span 1;
}

<div id="container">
  <div class="content-3x">
    3
  </div>
  <div class="content-2x double-height">
    4
  </div>
  <div class="content-1x">
    5
  </div>
  <div class="content-1x">
    5
  </div>
  <div class="content-2x">
    4
  </div>
  <div class="content-1x">
    5
  </div>
  <div class="content-2x">
    4
  </div>
  <div class="content-3x">
    6
  </div>
  <div class="content-2x">
    7
  </div>
  <div class="content-1x">
    8
  </div>
  <div class="content-1x">
    9
  </div>
  <div class="content-2x">
    10
  </div>
</div>

有没有不使用媒体查询之类的简单方法来做到这一点？

Answer 1

试试这个，添加

grid-auto-flow:dense; to grid container

This attempts to fill in holes earlier in the grid, if smaller items come up later. This may cause items to appear out-of-order, when doing so would fill in holes left by larger items.

同样对于.doubleheight，你给它增加了高度，但你没有告诉网格布局你占用了那么多空间，这是必要的，因为其他div的位置取决于它。你可以通过添加

   .double-height {
      height: 31rem;
      grid-row: span 2!important;
      grid-column: span 2!important;
    }

这段代码告诉我们，双倍高度的 div 从它自己的位置向右移动 2 列，从它自己的位置向下移动 2 行。

#container {
  width: 40%;
  margin-left: 20%;
  margin-bottom: 1rem;
  display: grid;
  float: left;
  grid-template-columns: auto;
  grid-auto-flow:dense;
}

#container>div:nth-child(1) {
  margin-top: 0 !important;
}

.content-1x,
.content-2x,
.content-3x {
  margin: 1rem 1rem 0 0;
  height: 15rem;
  border-bottom: 1px solid #ddd;
  border-right: 1px solid #ddd;
}

.double-height {
  height: 31rem;
  grid-row: span 2!important;
  grid-column: span 2!important;
}

.content-3x {
  grid-area: auto / auto / auto / span 3;
}

.content-2x {
  grid-area: auto / auto / auto / span 2;
}

.content-1x {
  grid-area: auto / auto / auto / span 1;
}

<div id="container">
  <div class="content-3x">
    3
  </div>
  <div class="content-2x double-height">
    4
  </div>
  <div class="content-1x">
    5
  </div>
  <div class="content-1x">
    5
  </div>
  <div class="content-2x">
    4
  </div>
  <div class="content-1x">
    5
  </div>
  <div class="content-2x">
    4
  </div>
  <div class="content-3x">
    6
  </div>
  <div class="content-2x">
    7
  </div>
  <div class="content-1x">
    8
  </div>
  <div class="content-1x">
    9
  </div>
  <div class="content-2x">
    10
  </div>
</div>