如何用CSS Grid实现行高基于内容按比例分配剩余空间？

需求 #

• Row 1 始终为自身内容高度 + 1份剩余可用空间
• Row 2 始终为自身内容高度
• Row 3 始终为自身内容高度 + 2份剩余可用空间

当前代码 #

CSS #

.container{
  height: 150px;
  width: 75px;
  resize: vertical;
  overflow: auto;
  display: grid;
  grid-template-rows: 1fr min-content 2fr;
  grid-template-columns: 100%;

  & :nth-child(1){
    background-color: pink;
  }
  & :nth-child(2){
    background-color: aqua;
  }
  & :nth-child(3){
    background-color: lime;
  }
}

HTML #

<div class="container">
  <div>Row 1</div>
  <div>Row 2</div>
  <div>Row 3</div>
</div>

问题描述 #

Row 2 符合预期，但Row 1和Row 3不符合需求：缩小容器时，当Row 1达到自身内容最小高度后，Row 3会占据所有剩余空间，破坏了1:2的剩余空间分配比例。尝试使用类似calc(min-content + 1fr)的写法但无法生效，询问能否用CSS Grid实现预期效果。

补充示例（问题复现） #

当容器高度设为70px时，Row 1达到最小高度后，Row 3占据所有剩余空间：

CSS #

.container{
  height: 70px;
  width: 75px;
  resize: vertical;
  overflow: auto;
  display: grid;
  grid-template-rows: 1fr min-content 2fr;
  grid-template-columns: 100%;

  & :nth-child(1){
    background-color: pink;
  }
  & :nth-child(2){
    background-color: aqua;
  }
  & :nth-child(3){
    background-color: lime;
  }
}

HTML #

<div class="container">
  <div>Row 1</div>
  <div>Row 2</div>
  <div>Row 3</div>
</div>

解决方案 #

可以用CSS Grid实现，核心是使用minmax()函数为Row 1和Row 3的轨道设置最小为内容高度、最大为比例分配空间的规则，避免轨道被压缩到内容高度以下，从而保证剩余空间始终按1:2的比例分配。

修改后的关键代码是将grid-template-rows改为：

grid-template-rows: minmax(min-content, 1fr) min-content minmax(min-content, 2fr);

完整代码 #

CSS

.container{
  height: 150px;
  width: 75px;
  resize: vertical;
  overflow: auto;
  display: grid;
  /* 使用minmax确保轨道不小于内容高度，同时按比例分配剩余空间 */
  grid-template-rows: minmax(min-content, 1fr) min-content minmax(min-content, 2fr);
  grid-template-columns: 100%;

  & :nth-child(1){
    background-color: pink;
  }
  & :nth-child(2){
    background-color: aqua;
  }
  & :nth-child(3){
    background-color: lime;
  }
}

HTML

<div class="container">
  <div>Row 1</div>
  <div>Row 2</div>
  <div>Row 3</div>
</div>

原理说明 #

• minmax(min-content, 1fr)：保证Row 1的高度至少为自身内容的最小高度，当容器有剩余空间时，按1份比例分配剩余空间。
• minmax(min-content, 2fr)：保证Row 3的高度至少为自身内容的最小高度，剩余空间按2份比例分配。
• 当容器高度小于三个行的内容最小高度总和时，容器会触发overflow: auto显示滚动条，不会破坏各轨道的最小高度规则；当容器高度足够时，剩余空间始终按1:2的比例分配给Row 1和Row 3，完全符合需求。

内容的提问来源于stack exchange，提问作者Peppe L-G