如何修改CSS Grid布局，让网格标题尺寸不与其他网格项一致？

解决方案 #

你只需要修改网格的行高规则，同时给三个项目块绑定对应的网格区域即可，修改步骤如下：

• 原生HTML开发场景：把代码中所有className替换为class，React开发场景可忽略该步
• 为.project-container添加行高定义规则，自定义标题行的高度
• 给三个项目块分别绑定对应的网格区域，和你定义的grid-template-areas对应上

修改后的完整CSS代码： #

.project-container {
  width: 80%;
  height: 80vh;
  margin: auto;
  display: grid;
  border: 1px solid pink;
  grid-template-columns: repeat(3, 1fr);
  /* 新增行高定义：第一行（标题）高度为10vh，第二行占剩余所有高度 */
  grid-template-rows: 10vh 1fr;
  grid-template-areas:
    "t t t"
    "p1 p2 p3";
}

.item {
  text-align: center;
  color: white;
  border: 1px solid pink;
}

.title {
  grid-area: t;
  text-align: center;
  border: 1px solid pink;
}

/* 新增：绑定项目块对应的网格区域 */
.project-one {
  grid-area: p1;
}
.project-two {
  grid-area: p2;
}
.project-three {
  grid-area: p3;
}

如果你需要调整标题高度，直接修改grid-template-rows里的第一个值即可，比如改成8vh就是标题高8vh，填auto就是由标题内容自身高度撑开。

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