CSS网格将网格区域与内容相适应[重复]。

Question

这个问题在这里已经有了答案:

只需CSS的砌体布局 (2个答案)

封闭 上月.

我使用Grid已经有一段时间了，但有一件事我还是不太能理解，那就是在使用双列布局时，有时一列的内容会迫使另一列的内容在下面有很大的空隙，因为第一列的内容比较长。当使用两列布局时，有时一列的内容会迫使另一列的内容在下面有很大的空隙，因为第一列的内容比较长。有没有办法让每个网格单元格垂直收缩以适应该单元格的内容？请看所附的示例片段。

.parent {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  max-width: 300px;
}

.child {
  border: 1px solid #000;
}

<div class="parent">
  <div class="child">
   Content Content Content
  </div>
  <div class="child">
    Content Content Content Content Content Content Content
  </div>
  <div class="child" id="child2">
    Content Content Content
  </div>
  <div class="child">
    Content Content Content
  </div>
</div>

在这个片段中，你会看到左上角网格区域的内容由于右上角的内容较长，下面有很大的空隙。有没有办法让它缩小来消除这个空隙呢？不过我并不完全确定仅用Grid就能做到这一点。

Answer 1

你可以在.child内添加另一个div，并应用边框。不知道这是否是你的目标。

.parent {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  max-width: 300px;
}

.child>div {
  border: 1px solid #000;
}

<div class="parent">
  <div class="child"><div>Content Content Content</div></div>
  <div class="child"><div>Content Content Content Content Content Content Content</div></div>
  <div class="child"><div>Content Content Content</div></div>
  <div class="child"><div>Content Content Content</div></div>
</div>