CSS Grid Layout: Align the baseline of elements that span multiple rows to the bottom row of other columns.-PHP Chinese Network Q&A

Article Topic Learning Download Q&A Programming Dictionary Game Recent Updates

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

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

P粉032649413 2023-08-02 15:26:53

349

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; }

 aaaaa
 bbbbb
 ccccc

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 }

 aaaaa
  bbbbb
 ccccc

How to align a and c with the baseline?

P粉032649413

reply all (2)

P粉6455691972023-08-03 00:56:55 2 floor

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; }

 aaaaa
   bbbbb
 ccccc

Like+0

Add Reply

P粉5556967382023-08-03 00:54:09 1 floor

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; }