CSS grid: How to align baseline of spanned row to the last row of other columns

Question

I want to align the baseline of a to 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 making the outer grid a single row and wrap b and c into a single div with inline-whatever, but a still always align to 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 make a align baseline to c?

Tim R · Accepted Answer · 2023-08-03T03:47:16.223

2

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

Can I Use align-items: last baseline? is showing 85% global support.

Specification jargon can be found at 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>

edited Aug 03 '23 at 03:47

answered Aug 03 '23 at 03:16

Tim R

2,622
1
3
19

Thank you. I didn't aware that `last baseline` exists. – Ricky Mo Aug 03 '23 at 03:17
I didn't either until I saw it in the list of [values](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items#values). I made the effort to cross-browser check because I was skeptical that it was supported. [Can I Use](https://caniuse.com/mdn-css_properties_align-self_flex_context_last_baseline) is showing 85% support. Support appears to be less than a year old except for Firefox since 2017. – Tim R Aug 03 '23 at 03:22

score 1 · Answer 2 · answered Aug 03 '23 at 03:44

Since last baseline is still relatively new (I am using Electron 19 which does not support), I am looking for alternatives. Referring to this SO post about flex, turns out I have to wrap the inline-block into yet 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>

If you were to declare both values, `#grid { align-items: baseline; align-items: last baseline; }`, I believe browsers that don't support the `last baseline` value will ignore that declaration and use the first declaration of `baseline`. Give it a try so that you'll have the correct declaration moving forward. — Tim R, Aug 03 '23 at 03:55

CSS grid: How to align baseline of spanned row to the last row of other columns

2 Answers2