当grid子项包含图片时如何让所有网格项宽高一致？

• 核心错误是属性名拼写错误：代码中写的grid-row-template不是Grid布局的合法属性，正确的行定义属性为grid-template-rows，拼写错误导致预设的等分行规则完全失效，Grid会按照子元素内容的自然高度自动分配行空间，包含图片的子项被图片内容撑高，自然和其他纯文本子项高度不一致。
• 子元素设置的height: 60%是相对父级网格行的高度计算的，在父级行高规则失效、行高由内容决定的前提下，百分比高度的计算基准不统一，进一步放大了高度差。
• 父容器设置的align-items: start会让子项按内容高度靠行起点对齐，不会自动拉伸撑满整行，也会导致高度看起来不统一。

1. 修正拼写错误的Grid属性，将grid-row-template改为grid-template-rows，同时把repeat(auto-fill, 1fr)改为repeat(4, 1fr)：auto-fill适用于子项数量不固定、需要自动换行填充的场景，当前固定有4个子项，直接指定重复4次即可，确保4个网格行平均分配容器500px的高度，所有行的基准高度完全一致。
2. 将父容器的align-items从start改为stretch（该值为Grid布局align-items的默认值），让子项默认自动拉伸撑满整行高度，保证所有子项的父级高度基准统一。
3. 如果需要子项保持60%的行高、垂直居中在行内，给子项加上margin: auto 0即可，此时父级行高已经是明确的固定均分高度，百分比高度计算会完全统一。

* {
  margin: 0;
  padding: 0;
}

.mainContainer {
  height: 500px;
  gap: 30px;
  display: grid;
  /* 修正属性名，4行等高分担容器高度 */
  grid-template-rows: repeat(4, 1fr);
  background-color: black;
  color: white;
  justify-items: center;
  /* 子项拉伸撑满行高，统一高度基准 */
  align-items: stretch;
}

.mainContainer div {
  display: grid;
  align-content: center;
  justify-content: center;
  width: 60%;
  border: 1px solid yellow;
  height: 60%;
  border-radius: 10px;
  /* 垂直居中在行内 */
  margin: auto 0;
}

.mainContainer img {
  height: 50%;
  width: 100%;
  object-fit: contain;
}

<div class="mainContainer">
  <div> <img src="https://pbs.twimg.com/profile_images/1455185376876826625/s1AjSxph_400x400.jpg"> </div>
  <div> Box 1 </div>
  <div> Box 2 </div>
  <div> Box 3 </div>
</div>

内容的提问来源于stack exchange，提问作者Altin I. Sylejmani