使所有高度相同，并以CSS网格为中心

Question

使用CSS网格，我知道：

• 如何使所有高度的所有项目（下面的示例1）
• 如何垂直以垂直为中心（示例2）

，但如何同时制作两者：所有项目的高度相同（用于示例1 fr）和文本是垂直中心的吗？

我已经读过我如何在CSS网格布局中指定行高度？和中心在CSS网格中，但在这里似乎特定于align-items：center;。

注意：我想避免将网格与flexbox或非网格解决方案（例如我如何（水平和垂直）在DIV块内（水平和垂直）中心文本？。

请参阅示例：

.grid1 { display: grid; grid-template-rows: repeat(2, 1fr); 
         grid-template-columns: repeat(4, 1fr); grid-gap: 2em;  }
.grid2 { display: grid; grid-template-rows: repeat(2, 1fr); 
         grid-template-columns: repeat(4, 1fr); grid-gap: 2em; align-items: center; }
.item { background-color: yellow; }

<div class="grid1">
<div class="item">
ABCABCABCABCABC
</div>
<div class="item">
DEFDEFDEFDEFDEF
</div>
<div class="item">
GHIGHIGHIGHIGHI
JKLJKLJKLJKLJKL
</div>
</div>
<br><br><br>
<div class="grid2">
<div class="item">
ABCABCABCABCABC
</div>
<div class="item">
DEFDEFDEFDEFDEF
</div>
<div class="item">
GHIGHIGHIGHIGHI
JKLJKLJKLJKLJKL
</div>
</div>