How Is The Baseline Determined For The Content Of Grid Items?

This has really got me confused. See the two demos below: https://jsfiddle.net/8m2cujvg/ https://jsfiddle.net/8m2cujvg/1/ You can see that the first one has an issue with text al

Solution 1:

You will get surprised but it seems you discovered a bug in Chromium based browsers (Chrome and Edge) because both your output behave the same in Firefox.

This is logically a bug because whataver the alignment, the output should never produce an overlap or an overflow especially that you didn't specify any explicit height or any template row so this is definitely a bug.

Solution 2:

"I struggle to see any differentiation between block and inline-block."

The difference is that inline level elements activate the vertical-align property.

So in your span with display: inline-block, a vertical-align: baseline rule is applied by default. This sets the content of the span to the baseline of the parent.

The vertical-align property has no effect on block level elements.

The vertical-align CSS property sets vertical alignment of an inline, inline-block or table-cell box. ~ MDN

The solution is to override the default. Add this to your code:

span {
  display: inline-block;
  vertical-align: top; /* new */
}

<divstyle="display: grid; align-items: baseline; gap: 10px; grid-template-columns: 160px minmax(100px, 200px) auto;"><divstyle="grid-column-start: 1;"><span>
        First row name
      </span></div><divstyle="grid-column: 2 / 4;"><div><buttonstyle="height:30px">
              First row description
        </button></div></div><divstyle="grid-column-start: 1;"><span>
        First row description
    </span></div><divstyle="grid-column: 2 / 4;"><div><spanstyle="display:inline-block; vertical-align: top;">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean m Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean m Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean m Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean m
      </span></div></div></div>