CSS 网格自定义布局

Question

我正在尝试构建一个 CSS 网格

我不想在 item2 和 item3 之间有空间，并希望这些项目在容器顶部对齐。

仅使用 CSS 而不修改 HTML 结构是否可以实现？

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: start;
}

.item1,
.item2,
.item3 {
  border: 1px solid black;
}

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

.item1 img {
  width: 80px;
  height: 115px;
}

.item2,
.item3 {
  grid-column: span 1;
  grid-row: span 1;
}

<div class="grid-container">
  <div class="item1">
    <img src="https://dummyimage.com/80x115/000/fff">
  </div>
  <div class="item2">Element 2</div>
  <div class="item3">Element 3</div>
</div>

Answer 1

使用以下代码来满足您的要求。

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    align-items: start;
}

.item1,
.item2,
.item3 {
    border: 1px solid black;
}

.item1 {
    grid-column: span 1;
    grid-row: span 3;
}

.item1 img {
    width: 80px;
    height: 115px;
}

.item2,
.item3 {
    grid-column: span 1;
    grid-row: span 1;
}

<div class="grid-container">
    <div class="item1">
        <img src="https://dummyimage.com/80x115/000/fff">
    </div>
    <div class="item2">Element 2</div>
    <div class="item3">Element 3</div>
</div>

Answer 2

将这些行添加到您的

.grid-container

样式中：

.grid-container {
  /* ... */

  grid-template-rows: 0fr 1fr;
  row-gap: 0;
}