网格放置问题：网格容器中的网格项目不会让步答案

【问题标题】：Grid-Placement Issues: Grid-items in the Grid-Container wont budge网格放置问题：网格容器中的网格项目不会让步
【发布时间】：2021-11-07 22:56:37
【问题描述】：

所以我的问题在于网格放置，由于某种原因，嵌套的段落元素不允许我将它们与我指定的网格框对齐。

我尝试了开发人员工具和一切，但我仍然无法找到对我的问题的合乎逻辑的解释，嵌套在图像中的网格框是我能想到的保持响应式登录页面的唯一方法，这让我很头疼。谁能告诉我我在哪里出轨了...

我尝试创建一个类来尝试“.box.grid-placement”一个结束选择器，但也没有用。

我对这个很迷茫......

感谢您阅读并花时间审阅我的帖子。

   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>

【问题讨论】：

通过将p 设为具有所有这些属性的网格容器，您有什么期望？
@TemaniAfif 非常感谢您的提示，我花了一点时间点击但我明白了！非常感谢！

标签： css css-selectors css-position css-grid

【解决方案1】：

首先我要感谢@TemaniAfif 给了我提示而不是答案，我接受了它并带着它跑了。我现在将回答我的错误。通过使段落元素显示：网格，我创建了一个没有网格项目的网格。因此，更正方法是将段落元素嵌套到另一个类中，使它们成为 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>

【讨论】：