Question

大家好我找不到任何帮助示例，因为我从未使用过CSS网格，反正如何用下一个元素填充网格中的空白区域？我的1fr元素不适合之前可用的空格。是因为我将班级的高度加倍或是什么？就像我说的那样，我从来没有使用过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

如果较小的项目，这会尝试在网格中填充漏洞以后来这样做可能会导致项目在无序状态下出现所以会填补较大项目留下的洞。

同样对于 .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>

CSS网格空的空间留在一个适合它的元素之前

1 个答案: