如何在具有自动高度的 CSS 网格中排列项目

Question

我想用 CSS 网格制作一个看起来很简单的童话布局。

如上图所示，我想将 3 个项目以与图中所示完全相同的顺序放置在网格中，我不想为任何项目设置特定高度，因为每个项目根据里面的内容有不同的高度。我想将 70% 的网格水平空间分配给 item1，将 30% 分配给 item2 和 item3，item3 应该放在 item2 下方。同样，项目的高度应该是auto。我尝试了很多小时来实现这一目标，但没有成功。

问题的标记：

<div class="container">
  <div class="item1">some content in it...</div>
  <div class="item2">some Content in it...</div>
  <div class="item3">some Content in it...</div>
</div>

Answer 1

按要求解决：

您可以使用grid-template-areas 将第一项跨越多行。并在右列末尾使用一个垫片，使项目与需要的一样大。

我们可以使用 calc 来计算grip-gap。

.grid {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: calc(70% - 10px) calc(30% - 10px);
  grid-template-areas: "item-1 item-2" "item-1 item-3" "item-1 spacer";
  border: 1px dashed #000;
  align-items: start;
}

.item {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 32px;
  font-weight: bold;
}

@media screen and (max-width: 600px) {
  .grid {
    grid-template-areas: "item-2" "item-1" "item-3";
    grid-template-columns: 100%;
  }
}

.item-1 {
  grid-area: item-1;
}

.item-2 {
  grid-area: item-2;
}

.item-3 {
  grid-area: item-3;
}

.purple {
  background-color: #5B00FF;
}

.red {
  background-color: #FF0000;
}

.pink {
  background-color: #FF00FD
}

.h-500 {
  height: 500px;
}

.h-100 {
  height: 100px;
}

.h-200 {
  height: 200px;
}

<div class="grid">
  <div class="item item-1 purple h-500">Item 1</div>
  <div class="item item-2 red h-100">Item 2</div>
  <div class="item item-3 pink h-200">Item 3</div>
</div>

不同列的替代解决方案：

您可以将grid-gap 与grid-template-columns 一起使用。您必须将grid-gap 考虑到模板列的宽度这就是为什么会有这个计算。

.grid {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: calc(70% - 10px) calc(30% - 10px);
  border: 1px dashed #000;
}

.col--right {
  display: flex;
  flex-flow: column nowrap;
  gap: 20px;
}

.item {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 32px;
  font-weight: bold;
}

.purple {
  background-color: #5B00FF;
}

.red {
  background-color: #FF0000;
}

.pink {
  background-color: #FF00FD
}

.h-500 {
  height: 500px;
}

.h-100 {
  height: 100px;
}

.h-200 {
  height: 200px;
}

<div class="grid">
  <div class="col col--left">
    <div class="item purple h-500">Item 1</div>
  </div>
  <div class="col col--right">
    <div class="item red h-100">Item 2</div>
    <div class="item pink h-200">Item 3</div>
  </div>
</div>