How to align grid columns to the baseline while keeping them stretched?

Question

I have a grid with two columns. The second column has a larger font size:

.container {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.5rem;
}

.text1 {
  color: #fff;
  background-color: #000;
}

.text2 {
  font-size: 3.75rem;
}

<div class="container">
  <div class="text1">text1</div>
  <div class="text2">text2</div>
</div>

I wanted to align the texts to the baseline so I added align-items: baseline; to .container and this happened:

The texts are aligned correctly but the black background doesn't take the whole grid block. How can I keep the text1 container stretched while aligning its content to baseline?

I've tried these but none of them worked:

adding height: 100% to .text1
adding align-self: stretch and align-content: baseline to .text1
a wrapper div for the background and a span for the content and setting align-self: baseline for the span.

score 2 · Accepted Answer · answered Apr 12 '23 at 07:13

2

You can try to align text item by flex:

.container {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.5rem;
    align-items: baseline;
}

.text1 {
    color: #fff;
    background-color: #000;
    height: 100%;
    display: flex;
    align-items: last baseline;
}

.text2 {
    font-size: 3.75rem;
    align-self: center;
}

<div class="container">
    <div class="text1">text1</div>
    <div class="text2">text2</div>
</div>

answered Apr 12 '23 at 07:13

TheNikCD

191
1
2
18

2

This is a good answer. The one tweak you might make to this is setting `.text2 { align-self: baseline; }` so that the text baselines are the same. – Jackson Gabbard Apr 12 '23 at 07:25

score 0 · Answer 2 · answered Apr 12 '23 at 07:03

0

If you don't want to use a table, this answer might point you in the correct direction.

If you don't mind using display: table, you can use the vertical-align property, as shown here.

.container {
  display: table;
  grid-template-columns: max-content 1fr;
  gap: 0.5rem;
}

.text1 {
  display: table-cell;
  color: #fff;
  background-color: #000;
  vertical-align: bottom;
}

.text2 {
  font-size: 3.75rem;
}

<div class="container">
  <div class="text1">text1</div>
  <div class="text2">text2</div>
</div>

answered Apr 12 '23 at 07:03

Nils Kähler

2,645
1
21
26

Thank you for the response. `vertical-align: bottom` is a little different than `align-items: baseline` as it doesn't take `line-height` into account. Also in your code snippet the texts aren't aligned correctly. So it doesn't suit my needs. – Arman Apr 12 '23 at 07:23

webworm84 · Answer 3 · 2023-04-12T08:15:31.193

I used align-items:self-end , display:flex and line-height attributes to align the texts same level.

.container {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax( max-content, 0px));
 grid-gap: 1rem;
}
.text1 {
 color: #fff;
 background-color: #000;
 align-items:self-end;
 display:flex;
 height:100px;
 padding:25px 25px 0px 25px;
 line-height:0.9;

}
.text2 {
 color: #000;
 display: flex;
 align-items:self-end;
 font-size: 3.25rem;
 line-height: 0.7;
}

<div class="container">
 <div class="text1">text1</div>
 <div class="text2">text2</div> 
</div>

How to align grid columns to the baseline while keeping them stretched?

3 Answers3