所以我的问题是网格放置，由于某些原因嵌套的段落元素不允许我将它们对齐到我指定的网格框。
我尝试了开发工具和一切，我仍然找不到我的问题的逻辑解释，网格框嵌套在图像是我能想到的唯一方法，以保持一个响应的登陆页面，这是我的屁股痛。有没有人能告诉我我是在哪里出轨的?
我尝试创建一个类来尝试".box。网格位置";一个结束选择器，它也不工作。
我在这个问题上很困惑…
感谢您花时间阅读我的文章。
body{
box-sizing:border-box;
padding:0;
margin:0;
}
.landingPage{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1;
width: 100vw;
height: 80vh;
color:white;
}
/*------Heres Where I've setup my grid------*/
.box1 p,
.box2 p,
.box3 p {
display:grid;
grid-template-columns: 1fr;
grid-template-rows: 200px 200px 200px 100px;
height: 80vh;
justify-content: center;
}
.box1 p{
grid-column: 1 / -1;
grid-row: 2 / 3;
}
/* .landingPage > div{
width: 100%;
height: 80vh;
} */
.box1{
max-height: 100%;
}
.box1,
.box2,
.box3{
position: relative;
}
.box1:after,
.box2:after,
.box3:after{
content:" ";
position: absolute;
width: 100%;
height:100%;
bottom:0px;
background: linear-gradient(176deg, rgba(7, 219, 131, 0.075) 0%, rgba(0, 0, 0, 0.445) 57%, rgba(0, 225, 255, 0.24) 100%);
}
.box1{
background: no-repeat center url("https://images.unsplash.com/photo-1534146789009-76ed5060ec70?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=653&q=80");
}
.box2{
background: no-repeat center url("https://images.unsplash.com/photo-1631339960096-b4a035ed463d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=700&q=80");
}
.box3{
left:0;
background: no-repeat center url("https://images.unsplash.com/photo-1465311354905-789ff5f7a457?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80");
}
.call-to-action{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
width: 100vw;
height: 80vh;
background: linear-gradient(176deg,rgba(130, 176, 109, 0.979) 0%, rgba(165, 91, 39, 0.966) 35%, rgba(1, 87, 99, 0.959) 100%);
width: 100vw;
height:19vh;
color:#fff;
}<body>
<div class="landingPage">
<div class="box1">
<p class='grid-placement'>Explore</p>
</div>
<div class="box2">
<p>Experiance</p>
</div>
<div class="box3">
<p>...and hang</p>
</div>
</div>
<div class="call-to-action">
<div class="box3--info">a</div>
<div class="box3--info">b</div>
<div class="box3--info">c</div>
</div>
</body>首先我要感谢@TemaniAfif给我提示，而不是答案，我接受了它，并与它一起运行。现在我来回答我的错误。通过创建段落元素Display:grid，我创建了一个没有网格项的网格。因此，纠正方法是将Paragraph元素嵌套到另一个类中，使它们成为Grid-Items。
display: grid;
grid-template-columns: 1fr 1fr 1fr;
color: white;
font-family: "Raleway", sans-serif;
height: 80vh;
width: 100%;
}
-------New code added to make the change of arranging the P elements----
.align-para-1 {
font-size: 48px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 200px 200px 200px 100px;
height: 100%;
width: 100%;
align-items: center;
justify-content: center;
}
-------The Gridbox needs Items can only be moved by nesting them
-------This code will not work to arrange the the P elements into the correct grid, so the elements must be nested. --
/* .box1 p,
.box2 p,
.box3 p {
font-size: 48px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 200px 200px 200px 100px;
height: 100%;
width: 100%;
align-items: center;
justify-content: center;
} */
.box1 p {
grid-column: 2 / 3;
grid-row: 3 / 4;
}
.box2 p {
grid-column: 2 / -4;
grid-row: 1 / 2;
}```
<body>
<div class="landingPage">
<div class="box1">
<div class="align-para-1">
<p>Explore</p>
</div>
</div>
<div class="box2">
<p>Experiance</p>
</div>
<div class="box3">
<p>...and hang</p>
</div>
</div>
<div class="call-to-action">
<div class="box3--info">a</div>
<div class="box3--info">b</div>
<div class="box3--info">c</div>
</div>
</body>
</html>