CSS グリッド レイアウト: 複数の行にまたがる要素のベースラインを他の列の最下行に揃えます。

Question

aとcのベースラインを揃えたいです。

#grid{
  表示:グリッド;
  グリッド テンプレート列: 1fr 1fr;
  align-items: ベースライン;
}
#a{
  グリッド行: 1 / スパン 2;
  グリッド列: 1;
  パディング: 8px;
  背景: 赤;
}
#b{
  グリッド行: 1;
  グリッド列: 2;
  背景: 黄色;
}
#c{
  グリッド行: 2;
  グリッド列: 2;
  背景: 青;
}

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

外側のグリッドを単一行に設定し、inline-whatever 属性を使用して b と c を div でラップしようとしましたが、a は常に c ではなく b と整列します。

#grid{
  表示:グリッド;
  グリッド テンプレート列: 1fr 1fr;
  align-items: ベースライン;
}
#a{
  グリッド行: 1;
  グリッド列: 1;
  パディング:8px;
  背景:赤;
}
#d{
  表示:インラインブロック;
  グリッド行: 1;
  グリッド列: 2;
}
#b{
  背景:黄色;
}
#c{
  背景: 青
}

<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

最後のベースラインは比較的新しいので (私はそれをサポートしていない Electron 19 を使用しています)、代替案を探しています。フレックスに関するこの SO 投稿を参照すると、インラインブロックを別のコンテナーでラップする必要があることがわかりました。

リーリー リーリー

Answer 2

あなたは align-items: last Baseline を宣言したいと思います。

「Align-items: last Baseline を使用できますか?」は、世界的なサポート率が 85% であることを示しています。

仕様の用語については、「Flex Container Baseline」を参照してください。

リーリー リーリー