如何让网格单元格内容填充单元格且不破坏流式布局

原代码 #

CSS

.cards {
  display: grid;
  grid-template-columns: repeat(2, 15em);
  padding: 0.5em;
  gap: 0.5em;
}

.cards>div {
  border: 1px solid blue;
}

h2 {
  margin: 0;
  border-bottom: 1px solid green;
}

.logo {
  float: right;
  border: 1px solid red;
}

p {
  margin: 0;
  background-color: yellow;
}

HTML

<div class="cards">
  <div>
    <h2>
      <div class="logo">LOGO<br>LOGO</div>Title</h2>
    <p>Some content made from some words</p>
  </div>
  <div>
    <h2>Title</h2>
    <p>Some content<br>Some more<br>Even more</p>
  </div>
</div>

当前效果说明 #

• LOGO延伸至p元素并偏移其内容，符合预期
• 第二张卡片的p元素高度决定网格行高，符合预期
• 第一张卡片的p元素未填满卡片底部，需要修复

解决方案 #

给每个卡片容器（.cards>div）设置内部网格布局，让p元素占据标题下方的剩余空间：

修改.cards>div的CSS样式：

.cards>div {
  border: 1px solid blue;
  display: grid;
  grid-template-rows: min-content 1fr;
}

方案说明 #

• 使用display: grid给卡片内部创建网格布局，不会让h2触发BFC（h2本身仍是普通块级元素），因此h2内的浮动LOGO仍会超出h2范围并偏移p元素内容，符合预期需求。
• grid-template-rows: min-content 1fr设置第一行（h2）高度为自身内容所需的最小高度，第二行（p）占据剩余全部空间，实现p元素填充标题下方剩余区域的效果。

内容的提问来源于stack exchange，提问作者Rolf