CSS Grid Layout: Align the baseline of elements that span multiple rows to the bottom row of other columns.

Question

I want to align the baselines of a and 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>

I tried setting the outer grid to a single line and wrapping b and c in a div with the inline-whatever attribute, but a still always aligns with b instead of 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>

How to align a and c with the baseline?

Answer 1

Since last baseline is relatively new (I'm using Electron 19 which doesn't support it), I'm looking for alternatives. Referring to this SO post about flex, it turns out I need to wrap the inline-block in another container.

#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

I believe you want to declare align-items: last baseline.

"Can I Use align-items: last baseline?" shows a global support rate of 85%.

For specification terminology, see Flex Container Baseline.

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