使CSS网格行高度最大化其内容[重复]

Question

如何根据内容使css网格行高度扩展为最大值？

所以这会改变：

进入：

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 20px;
  outline: 2px dashed red;
}

.panel-grid {
  background-color: #f0f0f0;
  outline: 1px solid blue;
  display: grid;
}

.row {
  background-color: #5879c5;
  text-align: center;
  font-weight: bold;
}

.row2 {
  background-color: #c5b07f;
  text-align: center;
  font-weight: bold;
}

.row3 {
  background-color: #e0ffef;
  text-align: center;
  font-weight: bold;
}

<div class="grid">
    <div class="panel-grid">
      <div class="row"><div>1</div><div>1</div><div>1</div></div>
      <div class="row2"><div>2</div></div>
      <div class="row3"><div>3</div></div>
    </div>
    <div class="panel-grid">
      <div class="row"><div>1</div></div>
      <div class="row2"><div>2</div><div>2</div><div>2</div></div>
      <div class="row3"><div>3</div></div>
    </div>
    <div class="panel-grid">
      <div class="row"><div>1</div></div>
      <div class="row2"><div>2</div></div>
      <div class="row3"><div>3</div></div>
    </div>
</div>

Answer 1

我认为这在浏览器支持display: contents 或display: subgrid 之前是不可能的。

同时，我认为您可以获得的最接近（不更改 HTML）是 equal height 跨容器的行。高度由每行中最高的项目设置。

将此添加到您的代码中：

.panel-grid {
   display: grid;
   grid-auto-rows: 1fr; /* new */
}

这会覆盖grid-auto-rows: auto 默认值。

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 20px;
  outline: 2px dashed red;
}

.panel-grid {
  background-color: #f0f0f0;
  outline: 1px solid blue;
  display: grid;
  grid-auto-rows: 1fr; /* new */
}

.row {
  background-color: #5879c5;
  text-align: center;
  font-weight: bold;
}

.row2 {
  background-color: #c5b07f;
  text-align: center;
  font-weight: bold;
}

.row3 {
  background-color: #e0ffef;
  text-align: center;
  font-weight: bold;
}

<div class="grid">
  <div class="panel-grid">
    <div class="row">
      <div>1</div>
      <div>1</div>
      <div>1</div>
    </div>
    <div class="row2">
      <div>2</div>
    </div>
    <div class="row3">
      <div>3</div>
    </div>
  </div>
  <div class="panel-grid">
    <div class="row">
      <div>1</div>
    </div>
    <div class="row2">
      <div>2</div>
      <div>2</div>
      <div>2</div>
    </div>
    <div class="row3">
      <div>3</div>
    </div>
  </div>
  <div class="panel-grid">
    <div class="row">
      <div>1</div>
    </div>
    <div class="row2">
      <div>2</div>
    </div>
    <div class="row3">
      <div>3</div>
    </div>
  </div>
</div>

如果您可以更改 HTML（将所有项目放在一个容器中），那么这是一个可能的选择：

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, auto); /* new */
  grid-auto-flow: column; /* new */
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  grid-gap: 5px;
  outline: 2px dashed red;
}

.row {
  background-color: #5879c5;
  text-align: center;
  font-weight: bold;
}

.row2 {
  background-color: #c5b07f;
  text-align: center;
  font-weight: bold;
}

.row3 {
  background-color: #e0ffef;
  text-align: center;
  font-weight: bold;
}

<div class="grid">
  <div class="row">
    <div>1</div>
    <div>1</div>
    <div>1</div>
  </div>
  <div class="row2">
    <div>2</div>
  </div>
  <div class="row3">
    <div>3</div>
  </div>
  <div class="row">
    <div>1</div>
  </div>
  <div class="row2">
    <div>2</div>
    <div>2</div>
    <div>2</div>
    <div>2</div>
  </div>
  <div class="row3">
    <div>3</div>
  </div>
  <div class="row">
    <div>1</div>
  </div>
  <div class="row2">
    <div>2</div>
  </div>
  <div class="row3">
    <div>3</div>
  </div>
</div>

更多细节：

• Positioning content of grid items in primary container (subgrid feature)
• Equal height rows in CSS Grid Layout

Answer 2

如果您能够修改您的 HTML 并重新排序您的 rows（如下面的演示代码所示），您应该能够通过使用带有 grid-auto-flow:row 的容器来完成类似的操作 - 如下所示：

.container {
  align-items: stretch;
  grid-auto-flow: row;
}

请看下面的演示：

.container {
  align-items: stretch;
  grid-auto-flow: row;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 9fr);
  grid-column-gap: 20px;
  outline: 2px dashed red;
}

.panel-grid {
  background-color: #f0f0f0;
  outline: 1px solid blue;
  display: grid;
}

.row {
  background-color: #5879c5;
  text-align: center;
  font-weight: bold;
}

.row2 {
  background-color: #c5b07f;
  text-align: center;
  font-weight: bold;
}

.row3 {
  background-color: #e0ffef;
  text-align: center;
  font-weight: bold;
}

<div class="grid container">
  <!-- row 1 -->
  <div class="row">
    <div>1</div>
    <div>1</div>
    <div>1</div>
  </div>
  <div class="row">
    <div>1</div>
  </div>
  <div class="row">
    <div>1</div>
  </div>

  <!-- row 2 -->
  <div class="row2">
    <div>2</div>
  </div>
  <div class="row2">
    <div>2</div>
    <div>2</div>
    <div>2</div>
  </div>
  <div class="row2">
    <div>2</div>
  </div>

  <!-- row 3 -->
  <div class="row3">
    <div>3</div>
  </div>
  <div class="row3">
    <div>3</div>
  </div>
  <div class="row3">
    <div>3</div>
  </div>
</div>