CSS Grid学习疑问：如何设置grid-template-rows值填充空白空间？

嘿，很高兴你在啃CSS Grid这块！针对你的场景，我给你分享几个实用的方法，帮你让网格完美填充空白空间：

1. 用fr单位分配剩余空间（最推荐） #

fr是CSS Grid里的分数单位，它会自动分配容器的剩余可用空间。结合你的网格区域设置，你可以根据需求给行分配不同的比例：

• 如果想让header自适应内容高度，剩下的两行平分剩余空间：

grid-template-rows: auto 1fr 1fr;

• 如果希望中间的about/contact行占更多空间，比如2:1的比例：

grid-template-rows: auto 2fr 1fr;

这里的auto会让header行根据内部内容自动调整高度，剩下的空间会按fr的比例分给下面两行，彻底消除空白。

2. 用minmax()确保行有最小高度 #

如果担心某些行的内容太少导致高度过矮，或者内容过多溢出，可以用minmax()设置行的最小/最大高度，同时结合fr分配剩余空间：

grid-template-rows: minmax(80px, auto) 1fr 1fr;

这个设置会让header行至少有80px高，内容多的时候自动扩展；下面两行依然平分剩余空间。

3. 让整个网格占满容器高度 #

要注意的是，fr单位生效的前提是网格容器有明确的高度（默认情况下容器高度由内容决定，没有剩余空间可分配）。所以如果想让网格占满整个视口，先给容器设置高度：

.grid-container {
  display: grid;
  grid-template-columns: 70% 30%;
  grid-template-areas: 
    "header header" 
    "about contact" 
    "latest status";
  grid-template-rows: auto 1fr 1fr;
  height: 100vh; /* 让容器占满视口高度 */
}

完整示例代码 #

.grid-container {
  display: grid;
  width: 100%;
  height: 100vh;
  grid-template-columns: 70% 30%;
  grid-template-areas: 
    "header header" 
    "about contact" 
    "latest status";
  grid-template-rows: auto 1fr 1fr;
  gap: 10px; /* 可选：添加网格间隙，让布局更美观 */
}

/* 给每个区域绑定类名 */
.header {
  grid-area: header;
  background: #eee;
}
.about {
  grid-area: about;
  background: #ddd;
}
.contact {
  grid-area: contact;
  background: #ccc;
}
.latest {
  grid-area: latest;
  background: #bbb;
}
.status {
  grid-area: status;
  background: #aaa;
}

这样设置后，你的网格就会完美填充容器空间，不会留下空白啦！

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