如何使用自动高度排列 css 网格中的项目

Question

我想用 css 网格制作一个童话般简单的布局。

如上图所示，我想按照图中所示的完全相同的顺序在网格中放置 3 个项目，我不想为任何项目设置特定高度，因为每个项目该项目具有不同的高度，具体取决于其中的内容。我想将 70% 的网格水平 space 分配给 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 将第一项跨越多行。并在右栏的末尾使用垫片使项目与需要的一样大。

我们可以使用计算来计算 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>

如何使用自动高度排列 css 网格中的项目

How to arrange items in css grid with auto heights

css

flexbox

css-grid

要求的解决方案：

具有不同列的替代解决方案：