CSS Grid - 在某些 div 上设计不相等的高度

Question

我有一个 CSS 网格，但我正在努力使布局适合。

正如您在下面看到的，一切都是正确的，但是我希望“第 1 项”和“第 6 项”的高度相同，以便一切顺利。

 .grid > div {background:red;border:2px solid blue;}
 .grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-gap: 10px;
  }
  .span-col-4{grid-column: span 4 / auto;}
  .span-row-2{grid-row: span 2 / auto;}
  .span-row-4{grid-row: span 4 / auto;}

<div class="grid">
  <div class="span-row-2">Item 1</div>
  <div class="span-row-4">Item 2</div>
  <div>Item 3</div>
  <div class="span-row-4">Item 4</div>
  <div>Item 5</div>
  <div class="span-row-2">Item 6</div>
  <div class="span-row-2">Item 7</div>
  <div class="span-col-4">Item 8</div>
</div>

谢谢

Answer 1

考虑更多行并定义行高以确保它们保持相等：

.grid>div {
  background: red;
  border: 2px solid blue;
}

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows:1fr;
  grid-gap: 10px;
}

.span-col-4 {
  grid-column: span 4;
}

.span-row-2 { grid-row: span 2;}
.span-row-3 { grid-row: span 3;}
.span-row-4 { grid-row: span 4;}
.span-row-5 { grid-row: span 5;}
.span-row-6 { grid-row: span 6;}

<div class="grid">
  <div class="span-row-3">Item 1</div>
  <div class="span-row-6">Item 2</div>
  <div class="span-row-2">Item 3</div>
  <div class="span-row-6">Item 4</div>
  <div class="span-row-2">Item 5</div>
  <div class="span-row-3">Item 6</div>
  <div class="span-row-2">Item 7</div>
  <div class="span-col-4 span-row-2">Item 8</div>
</div>

Answer 2

你可以应用 min-height css

.span-row-2 {
    grid-row: span 2 / auto;
    min-height: 46px;
}

“第 1 项”和“第 6 项”高度相同，但请确保无论您在何处应用 span-row-2，都会应用高度。最好使用不同的类名。