css网格，布局问题

Question

我有不同的网格包装器，如下所示，可以创建一个 css 网格，另请参见图片。这工作正常，但是我有一个隐藏元素“replyDev”，当我按下回复按钮时它应该显示一个 Div 元素。我希望该元素出现在黄色元素下方，并且它也应该是全宽的。 现在，正如您在附件中看到的那样，当我单击右下角的回复按钮时，紫色区域出现，而左侧被“最小包装”的绿色填充。 知道如何解决这个问题吗？

.smallwrapper {
   
    background-color: pink;
    display: grid;
    grid-template-columns: 
    1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: auto;
  
    grid-template-areas:
    "uh uh uh uh uh uh uh uh sb"
    "sw sw sw sw sw sw sw sw sw"
    "rpd rpd rpd rpd rpd rpd rpd rpd rpd"
   }
   .smallestwrapper {

     grid-area: sw;
    background-color: green;
    display: grid;
   
    grid-template-columns: 
    1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: auto, auto;
  
    grid-template-areas:
   
    "td td td td td td td td td"
     "lw lw lw lw lw lw lw lw lw"

   }
   
   .lowerWrapper {
   background-color: yellow;
   grid-area: lw;
   display: grid;
  
  grid-template-columns: 
   20px 90px 15px 25px 50px 50px 50px 1fr 30px;
      grid-template-rows: 50px;
      grid-template-areas:
      "vb pm ua ua bu rd rp . fg"
      
}

  .tiniestWrapper {
  grid-area: rpd;

  grid-template-columns: 
  1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas:
  "rpdev rpdev rpdev rpdev rpdev rpdev"

}
  .replyDev {

   grid-area: rpdev;
   background-color: purple;
}

 <div class="smallwrapper">
 <div class="lowerWrapper">
 <div class="firstelement" </div> 
 <a class="second element" id="show"></a>
    
    

  </div>
  <div  class="tiniestWrapper">
  <div [hidden]="Boolean"
  "this div is the purple area and should    
  show below the yellow area as part of the green area"
  </div>  
  </div>
  </div> //small wrapper closing div


 

Answer 1

解决了我的问题，我不得不将 div 组件降低一个 div。所以它是 Lower Wrapper 的一部分。