Question

我知道为什么这行不通，但是我想不出另一种选择。有什么办法可以使每一列的行跨越其内容的高度而与其他列的行不同吗？

下面粘贴的内容完全可以满足我的需要，但这是不正确的。 .recent从第2行开始，跨越2行，从而使行总数达到4。这在.middle和.right下造成了巨大的差距。这是屏幕截图：

@dwjohnston的网格截图以及您的解决方案：

.grid {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  grid-gap: 20px;
  align-items: start;
  background: pink;
}

.grid>.left {
  grid-column: 1 / span 3;
  grid-row: 1;
  background: green;
}

.grid>.recent {
  grid-column: 1 / span 3;
  grid-row: 2 / span 2;
  background: red;
}

.grid>.middle {
  grid-column: 4 / span 5;
  grid-row: 1 / span 2;
  background: gray;
}

.grid>.right {
  grid-column: 9 / span 3;
  grid-row: 1 / span 2;
  background: brown;
}

<div class="grid">
  <div class="left">
    Left
  </div>
  <div class="recent">
    Recent
    <br> Testing
    <br>
  </div>
  <div class="middle">
    Middle
    <br><br>
    <br><br>
    <br><br>
    <br><br>
    <br><br>
    <br><br>
    <br><br>
    <br><br>
    <br><br>
    <br><br>
    <br><br>
    <br><br>
    <br><br>
    <br><br>
    <br><br>
  </div>
  <div class="right">
    Right
  </div>
</div>

Answer 1

好的，如果我正确理解了问题，我认为我已经看到了问题。

这是我的解决方案：

.grid {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  grid-gap: 20px;
  align-items: start;
  background: pink;
}

.grid>.left {
  grid-column: 1 / span 3;
  grid-row: 1;
  background: green;
}

.grid>.recent {
  grid-column: 1 / span 3;
  grid-row: 2 / span 2;
  background: red;
}

.grid>.middle {
  grid-column: 4 / span 5;
  grid-row: 1 / span 4;
  background: gray;
}

.grid>.right {
  grid-column: 9 / span 3;
  grid-row: 1 / span 3;
  background: brown;
}

<div class="grid">
  <div class="left">
    Left
  </div>
  <div class="recent">
    Recent
    <br> Testing
    <br>
  </div>
  <div class="middle">
    Middle
    <br>text<br>
    <br>text<br>
    <br>text<br>
    <br>text<br>
    <br>text<br>
    <br>text<br>
    <br>text<br>
    <br>text<br>
    <br>text<br>
    <br>text<br>
    <br>text<br>
    <br>text<br>
    <br>text<br>
    <br>text<br>
    <br>text<br>
  </div>
  <div class="right">
    Right
  </div>
</div>

您在回答中所做的是：

.left。进入第1行，
.recent进入第2行和第3行，这将创建一个底部的第三行，包括20px的间隙。
.middle排行 1和2，但确实很大，因此将第2行推出并使其大量。

我所做的是使.middle跨度为4，因此它需要行1,2,3,4。这使.recent拥有自己的小型行，并使.middle的第四行（默认情况下，所有行的大小均为自动）占用了要增长的空间。

Answer 2

我希望这是您正在寻找的东西，根据对我和其他人的以下评论，您可以看到它没有任何缝隙，希望对您有所帮助：）

.grid {
  display: grid;
  grid-gap: 20px;
  background: pink;
  height: 100vh;
  grid-template-rows: 20px 20px auto;
  grid-template-columns: 30% auto 30%;
}
.grid > .left {
  grid-column: 1;
  grid-row: 1;
  background: green;
}
.grid > .recent {
  grid-column: 1;
  grid-row: 2;
  background: red;
}
.grid > .middle {
  grid-column: 2;
  grid-row: 1 / span 2;
  background: gray;
  height: 100vh;
}
.grid > .right {
  grid-column: 3;
  grid-row: 1;
  background: brown;
}

<div class="grid">
  <div class="left">Left</div>
  <div class="recent">
    Recent Testing
  </div>
  <div class="middle">Middle
    <br><br>
    <br><br>
    <br><br>
    <br><br>
    <br><br>
    <br><br>
    <br><br>
    <br><br>
    <br><br>
    <br><br>
    <br><br>
    <br><br>
    <br><br>
    <br><br>
    <br><br>
  </div>
  <div class="right">Right</div>
</div>

CSS网格行灵活性问题

2 个答案: