CSS网格：如何将跨行的基线与其他列的最后一行对齐

Question

我想将 a 的基线与 c 对齐。

#grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  align-items: baseline;
}
#a{
  grid-row: 1 / span 2;
  grid-column: 1;
  padding: 8px;
  background: red;
}
#b{
  grid-row: 1;
  grid-column: 2;
  background: yellow;
}
#c{
  grid-row: 2;
  grid-column: 2;
  background: blue;
}

<div id="grid">
  <div id="a">aaaaa</div>
  <div id="b">bbbbb</div>
  <div id="c">ccccc</div>
</div>

我尝试将外部网格设置为单行，并将 b 和 c 包装到带有 inline-whatever 的单个 div 中，但 a 仍然始终与 b 而不是 c 对齐。

#grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  align-items: baseline;
}
#a{
  grid-row: 1;
  grid-column: 1;
  padding:8px;
  background:red;
}
#d{
  display:inline-block;
  grid-row: 1;
  grid-column: 2;
}
#b{
  background:yellow;
}
#c{
  background:blue
}

<div id="grid">
  <div id="a">aaaaa</div>
  <div id="d">
    <div id="b">bbbbb</div>
    <div id="c">ccccc</div>
  </div>
</div>

如何使基线与c对齐？

Answer 1

我相信你想声明

align-items: last baseline

我可以使用

align-items: last baseline

吗？ 显示全球 85% 的支持率。

规范术语可以在Flex Container Baselines

找到

#grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: last baseline;
}

#a {
  grid-row: span 2;
  padding: 8px;
  background: red;
}
#b {
  background: yellow;
}

#c {
  background: blue;
}

<div id="grid">
  <div id="a">aaaaa</div>
  <div id="b">bbbbb</div>
  <div id="c">ccccc</div>
</div>

Answer 2

由于

last baseline

仍然相对较新（我使用的是不支持的 Electron 19），我正在寻找替代方案。参考this SO post关于flex，事实证明我必须将内联块包装到另一个容器中。

#grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  align-items: baseline;
}
#a{
  grid-row: 1;
  grid-column: 1;
  padding:8px;
  background:red;
}
#d{
  grid-row: 1;
  grid-column: 2;
}
#b{
  background:yellow;
}
#c{
  background:blue
}
.inline-block{
  display:inline-block;
}

<div id="grid">
  <div id="a">aaaaa</div>
  <div id="d">
    <div class="inline-block">
      <div id="b">bbbbb</div>
      <div id="c">ccccc</div>
    <div>
  </div>
</div>