图片底部出现意外空白，如何消除并保证两个item-info高度相等

问题原因 #

1. 外层.order为两列Grid布局，默认会让两个子元素.food-menu的高度自动拉齐为同一高度（高度由内容更多的左侧.food-menu决定）。
2. 你给.order .food-menu设置了display: grid，默认Grid行高规则为auto，即每行高度由自身内容决定：右侧#item-five的.item-info文本更短、高度更低，多余的高度就留在了.item-image区域底部，形成空白。
3. 你已经给图片设置了display: block，已经消除了图片默认行内元素的基线偏移空白，本次问题和默认空白无关。

解决方法 #

修改对应CSS规则即可同时解决空白问题和两个.item-info高度对齐问题：

.order .food-menu {
  display: grid;
  /* 新增以下两个属性 */
  grid-template-rows: 1fr auto;
  align-items: stretch;
}

/* 新增以下规则，让图片填满容器 */
.order .food-menu .item-image img {
  height: 100%;
  object-fit: cover;
}

/* 可选：强制保证.info高度完全统一 */
.order .food-menu .item-info {
  height: 100%;
}

实现逻辑 #

• grid-template-rows: 1fr auto：将.food-menu的Grid行分为两部分，图片区域占满所有剩余高度，info区域高度由自身内容决定
• align-items: stretch：让Grid子项自动拉伸占满所在行的高度
• object-fit: cover：保证图片填满容器时不会变形
• 外层Grid布局的自动等高特性，会自动让两个.item-info的高度保持一致

内容的提问来源于stack exchange，提问作者Satyajit Roy