设置grid-row后CSS Grid结构塌陷求助：Item5纵向占3行致布局收缩

Hey，我知道你在设置griditem5的纵向跨度时遇到了网格塌陷的麻烦——设置grid-row: row-start 3 / row-end 6后整个网格高度收缩了对吧？我来给你拆解问题原因和修复方法。

问题出在哪？ #

你的网格容器.grid现在只有行列模板，但没有明确的高度约束。你用的grid-template-rows: repeat(6, [row-start] 1fr [row-end])里的1fr单位，是基于容器的可用高度来分配每行空间的。如果容器本身没有固定高度（默认是靠内容撑开），当你让griditem5跨3行时，这些行没有足够的内容支撑高度，1fr就会收缩到最小，直接导致整个网格塌陷。

另外，你原来的griditem5的grid-row写法还有个小疏漏——row-end后面没写数值，应该补成row-end 6才对。

两种修复方案任你选 #

方案1：给网格容器加个明确高度

最简单的方式是让容器占满视口高度，或者设置固定高度，这样1fr就有明确的空间可以分配了：

.grid {
  display: grid;
  grid-template-columns: repeat(6, [col-start] 1fr [col-end]);
  grid-template-rows: repeat(6, [row-start] 1fr [row-end]);
  grid-gap: 5px;
  border: 2px solid green;
  padding: 5px;
  height: 100vh; /* 新增：让容器占满整个视口高度 */
}

方案2：用minmax()保证行有最小高度

如果你不想固定容器高度，可以把每行的模板改成minmax(100px, 1fr)，这样每行至少有100px的高度，同时在有多余空间时会自动扩展：

.grid {
  display: grid;
  grid-template-columns: repeat(6, [col-start] 1fr [col-end]);
  grid-template-rows: repeat(6, [row-start] minmax(100px, 1fr) [row-end]); /* 修改这里 */
  grid-gap: 5px;
  border: 2px solid green;
  padding: 5px;
}

最后修正griditem5的样式 #

把griditem5的grid-row改成正确的写法，确保它能从第3行跨到第6行：

.griditem5 {
  grid-column: col-start 1 / col-end 1;
  grid-row: row-start 3 / row-end 6; /* 明确指定结束行 */
  background-color: rgb(30, 123, 238);
}

这样改完之后，网格就不会塌陷了，griditem5也能稳稳占据3行的空间～

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