如何使用网格动态设置行高？

Question

我正在尝试构建一个网格，其中第一行有 400 像素，第二行类似于 fit-content，因为我的第一列是动态创建的，它的高度可能不足。

想法是，我有三个块，1 是动态的，2 和 3 是静态的，其中 3 应该始终低于 2：

但是我找不到一种方法来使第一行具有固定值 (400px)，第二行 auto 以适应块 1 的任何高度。如果我设置第一行 auto 和第二行 400px 我得到这个：

.container {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto 400px;
  width: 400px;
}

.block-1 {
  height: 300px;
  width: 200px;
  background: red;
}

.block-2 {
  height: 100px;
  width: 150px;
  background: blue;
  grid-column: 3/5;
}

.block-3 {
  height: 100px;
  width: 150px;
  background: green;
  grid-column: 3/5;
  grid-row-start: 2;
}

<div class="container">
  <div class="block-1"></div>
  <div class="block-2"></div>
  <div class="block-3"></div>
</div>

有没有办法用网格做到这一点？我可以改变网格的结构，我创建的方式不是必须的。

P.S。更改 HTML 不是一个选项。

Answer 1

这是你想要的吗？

.container {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto 400px;
  width: 400px;
}

.block-1 {
  height: 300px;
  width: 200px;
  background: red;
  grid-row: 1 / 3;
}

.block-2 {
  height: 100px;
  width: 150px;
  background: blue;
}

.block-3 {
  height: 100px;
  width: 150px;
  background: green;
  grid-column: 2/3;
  grid-row-start: 2;
}

<div class="container">
  <div class="block-1"></div>
  <div class="block-2"></div>
  <div class="block-3"></div>
</div>

Answer 2

这似乎可以解决问题。我使用命名网格模板区域作为 shorthand.

.container {
  display: grid; 
  grid-auto-columns: 1fr; 
  grid-auto-rows: 1fr; 
  grid-template-columns: 1fr 1fr; 
  grid-template-rows: min-content; 
  gap: 0px 0px; 
  grid-template-areas: 
    "block-1 block-2"
    "block-1 block-3"; 
  width: 400px; 
}

.block-1 { grid-area: block-1; background-color: red; height: 300px}

.block-2 { grid-area: block-2; background-color: blue; height: 100px }

.block-3 { grid-area: block-3; background-color: green; height: 100px; }

<div class="container">
  <div class="block-1"></div>
  <div class="block-2"></div>
  <div class="block-3"></div>
</div>

希望这对您有用，但如果您需要进行任何调整，那么我总是发现使用具有可视化 UI 网格的网站确实有帮助，例如https://grid.layoutit.com/

如何使用网格动态设置行高？

How can I set the height of a row dynamically with grid?

html

css

styles

css-grid