Grid布局问题：Grid容器内嵌套p元素无法对齐到指定网格单元格

• 核心错误1：Grid定位属性仅对*Grid容器的直接子元素（网格项）*生效，你将grid-column/grid-row属性写在.box1 p上，但p的父元素.box1并未设置display: grid，所有网格定位规则完全不生效。
• 核心错误2：你写的.box.grid-placement后代选择器无效：你的容器类名是.box1/.box2/.box3，没有.box类，且选择器写法错误，要选中box下的grid-placement类应该写.box1 .grid-placement。
• 次要问题1：你给p标签设置了height: 80vh，还为p本身设置了display: grid，规则逻辑完全混乱，你要的是p在box的网格里定位，不是把p本身变成网格容器。
• 次要问题2：box的:after伪元素是绝对定位，层级高于普通文档流的p标签，会把文字挡住，需要给p设置更高的z-index。
• 次要问题3：.landingPage的grid-template-rows: 1写法错误，应该是grid-template-rows: 1fr。

仅需修改CSS中Grid相关的部分即可，修改后的核心代码如下：

/* 修复：给所有box设置为grid容器，定义你需要的行列规则 */
.box1, .box2, .box3{
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 200px 200px 200px 100px;
  height: 80vh;
}
/* 修复：p标签作为网格项，设置定位规则，加z-index避免被伪元素遮挡 */
.box1 p, .box2 p, .box3 p{
  margin: 0;
  position: relative;
  z-index: 2;
  justify-self: center; /* 水平居中 */
}
/* 现在的grid-row/grid-column是相对于父级box的网格生效 */
.box1 p{
  grid-column: 1 / -1;
  grid-row: 2 / 3;
}
/* 修复landingPage的行高规则 */
.landingPage{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr; /* 修正原有错误写法 */
  width: 100vw;
  height: 80vh;
  color:white;
}

如果需要单独调整带.grid-placement类的p标签，直接用选择器.box1 .grid-placement即可生效。

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