CSS Grid佈局：將跨越多行的元素的基線與其他列的底部行對齊。

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>

如何使a與c對齊基線？

Answer 1

由於last baseline相對較新（我正在使用不支援它的Electron 19），我正在尋找替代方法。參考這篇關於flex的SO帖子，結果我需要將inline-block包裝在另一個容器中。

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

#

Answer 2

我相信你想要宣告align-items: last baseline。

"Can I Use align-items: last baseline?"顯示全球支援率為85%。

有關規範術語，請參閱Flex容器基準。

#

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