html - 如何在 CSS 中的网格中设置图片中的这种配置？

Question

.grid-container {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.grid-item {
  background: blue;
  height: 100px;
}

.grid-item .item1 {
  grid-row-start: 1;
  grid-row-end: 3;
}

<div class="grid-container">
  <div class="grid-item"> </div>

  <div class="grid-item item1"> </div>

  <div class="grid-item"> </div>
</div>

我有这个，但这不是我想要的 我不想要的

我想要这个，看下面这张图：

我想要的是

标签： htmlcsscss-grid

Answer 1

从网格项中删除高度并将行设置为 100px。

然后告诉“高”项目在第 2 列

.grid-container {
  display: grid;
  gap: 10px;
  grid-template-columns: 2fr 1fr;
  grid-auto-rows: 100px;
}

.grid-item {
  background: blue;
}

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

<div class="grid-container">
  <div class="grid-item"> </div>

  <div class="grid-item item1"> </div>

  <div class="grid-item"> </div>
</div>