css网格，布局问题

Question

我有不同的网格包装器，如下图所示，创建一个css网格也可以看到图片。这工作正常，但我有一个隐藏的元素＆＃34; replyDev＆＃34;当我按下回复按钮时应显示Div元素。我希望元素出现在Yellow元素下面，它也应该是全宽度。 现在你可以在附件上看到，当我点击右下角的回复按钮并且左侧充满了最小包装＆＃34;的绿色时，会出现紫色区域。 知道如何解决这个问题吗？

＆＃13;

＆＃13;

.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


 

＆＃13;

＆＃13;

＆＃13;

Answer 1

解决了我的问题，我不得不把div组件放在一个div下面。因此它是Lower Wrapper的一部分。