CSS Grid中grid-row失效：如何让芒果元素上下撑满？

你设置的grid-row: 1 / 2只让mango元素占据第一行（从第1根行线到第2根行线），这当然无法实现“从顶到底”的效果。想要让它跨满所有行，得用正确的行范围值。

具体解决步骤 #

1. 把mango的grid-row属性改成1 / -1，其中-1是CSS网格的特殊值，代表网格的最后一根行线（不管是显式定义的还是隐式生成的）：

.mango {
  grid-column: 3;
  grid-row: 1 / -1;
}

2. 不需要调整grid-flow属性，默认的row布局就可以满足需求。

补充说明 #

你的网格容器.fruit-box只定义了列（grid-template-columns），没有显式定义行，浏览器会根据内部元素的数量自动生成隐式行。用1 / -1就能让mango元素从第一根行线一直延伸到最后一根行线，完美占满垂直方向的全部空间。

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