html - 防止相邻组件高度在网格内增加

Question

对于桌面视图，我有 5 个组件需要采用以下结构。

我面临的问题是，当内容在一个块中增长时，例如在 item1 或 item2 中，它会影响其他块。

因此，例如，如果 item2 的内容较长而增加了它的高度，那么也会影响 item 1，如下所示。（反之亦然，item1 影响 item2）

似乎 .item2 类没有效果。我可以把它注释掉，效果一样。

但是无论我删除它还是尝试传入 span 0 都没有什么区别。

我该如何解决这个问题，以便 item2 可以随心所欲地增长但不影响 item 块（反之亦然，item1 可以增长而不影响 item2 块）？

HTML

<div class="wrapper">
  <div class="box item1">item1</div>
  <div class="box item2">item2</div>
  <div class="box item3">item2</div>
  <div class="box item4">item3</div>
  <div class="box item5">item4</div>
</div>

CSS

.wrapper {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 33% 33% 33%;
    background-color: #fff;
    color: #444;
    width: 80%;
    margin: 0 auto;
  }

  .box {
    background-color: #444;
    color: #fff;
    border-radius: 5px;
    padding: 20px;
    font-size: 150%;
  }

  .item1 {
    grid-column: 1 / span 2;
  }
  .item2 {
    grid-column: 3;
    grid-row: 1 / span 1;
  }
  .item3 {
    grid-column: 1 / span 2 ;
    grid-row: 2 ;
  }
  .item4 {
    grid-column: 1 / span 2 ;
    grid-row: 3 ;
  }
  .item5 {
    grid-column: 1 / span 2 ;
    grid-row: 4 ;
  }

标签： htmlcss

Answer 1

如果移出网格流，您可以尝试解决这个问题position: absolute;

.item2 {
  grid-column: 3;
  position: absolute;
}

.wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 33% 33% 33%;
  background-color: #fff;
  color: #444;
  width: 80%;
  margin: 0 auto;
  position: relative;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
}

.item1 {
  grid-column: 1 / span 2;
}

.item2 {
  grid-column: 3;
  position: absolute;
}

.item3 {
  grid-column: 1 / span 2;
  grid-row: 2;
}

.item4 {
  grid-column: 1 / span 2;
  grid-row: 3;
}

.item5 {
  grid-column: 1 / span 2;
  grid-row: 4;
}

<div class="wrapper">
  <div class="box item1">item1</div>
  <div class="box item2">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt officia, quidem atque vero accusamus quo doloribus, sapiente quas exercitationem culpa dolor saepe adipisci id necessitatibus, blanditiis iusto sint nisi.
  </div>
  <div class="box item3">item2</div>
  <div class="box item4">item3</div>
  <div class="box item5">item4</div>
</div>