内联网格垂直对齐第二行的基线

Question

CSS中是否有一种方法可以告诉内嵌网格应垂直对齐哪一行的基线？似乎具有 vertical-align：基线; 的嵌入式网格容器使用第一个单元格的基线。但是我想使用另一个单元格（或行）的基线。这可能吗？

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

.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日

到目前为止，我发现了何时

1. 网格的 align-items 不是基线

2. 第一个单元格跨越两行并具有 height：100％; AND

3. 第一个单元格包含一个行内块div，其高度为 100％; 和 vertical-align：text-bottom;

我可以强制将网格的基线设置在第二行的底部，几乎可以根据需要垂直对齐网格。不幸的是，在我的情况下，第二行中的其他单元格可能不是单行的1em高文本，因此它们的共享基线与定义网格垂直位置的单元格1中的基线不对应。

所以问题仍然存在：是否有办法在第二行的基线上垂直对齐嵌入式网格？

Answer 1

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

用以下一行替换文本