CSS网格-在某些div上设计的高度不相等 [英] CSS Grid - Design not equal heights on certain divs

问题描述

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

I have a CSS grid but I am struggling to make the layout fit.

正如您在下面看到的，一切都是正确的，但是我想要项目1和项目6具有相同的高度，因此它们可以流畅地运行。

As you can see below, all is correct, however I want 'Item 1" and "Item 6" to be the same height so it all runs fluidly.

 .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>

谢谢

推荐答案

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

Consider more rows and define a the height of rows to make sure they stay equal:

.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>

这篇关于CSS网格-在某些div上设计的高度不相等的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！