css - 内联网格垂直对齐在第二行的基线上

Question

CSS 中有没有办法告诉内联网格它应该垂直对齐哪一行的基线？看起来好像是一个带有垂直对齐的内联网格容器:基线；使用第一个单元格的基线。但我想使用另一个单元格(或行)的基线。这可能吗？

下面的代码和图像显示了我所拥有的和我想要的。

.grid{
	display: inline-grid;
	grid-template-columns: auto auto auto;
	grid-template-rows: auto auto auto;
	grid-gap: 20px;
	align-items: baseline;
	border: 1px solid blue;
	padding: 20px;
}
.grid>div{
	border: 1px solid red;
}

		This is a line of Text
		
		<div class="grid">
			<div>A</div>
			<div style="font-size: 3em;">B</div>
			<div>C</div>
			<div>align me</div>
			<div style="font-size: 5em;">e</div>
			<div style="font-size: 3em;">f</div>
			<div style="font-size: 3em;">G</div>
			<div>H</div>
			<div>I</div>
		</div>

显示内联网格垂直对齐的图像



7月30日编辑

到目前为止，我发现当

网格的对齐项不是基线，

第一个单元格跨越两行，高度为:100%；和

第一个单元格包含一个高度为 100% 的内联块 div；和垂直对齐:文本底部；

我可以强制网格的基线位于第二行的底部，几乎按照我的意愿垂直对齐我的网格。不幸的是，在我的情况下，第二行中的其他单元格可能不是单行 1em 高的文本，然后它们的共享基线与定义网格垂直位置的单元格 1 中的基线不对应。

所以问题仍然存在:有没有办法在第二行的基线上垂直对齐内联网格？

Answer 1

<div class="grid">text</div>

替换文本 这是一行文本