使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行。高度由每行中最高的项目设置。

.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>

更多详细信息：

• Positioning content of grid items in primary container (subgrid feature)