CSS网格定位子项的子项

Question

我想知道有没有可能在网格中定位网格容器的孩子的孩子？

<div class="grid-container">
  <div class="grid-item-1">
       ....
  </div>
  <div class="grid-item-2">
     ....
  </div>
   <div class="layer-2">
         <div class="grid-item-3">
                ....
         </div>
         <div class="grid-item-4">
                ....
         </div>
   </div>
</div>

我希望来自grid-item-3的细胞能够像grid-container的直系子代一样发挥作用。

或者我应该单独处理网格项目的每个子容器？

Answer 1

你在找这个吗？

​

.grid-container{
  width:100%;
  padding: 5px;
  background-color:grey;
}

.grid-container div{
    background-color:yellow;
    padding: 5px;
    display:flex;
    width;100%;
}

.grid-container div div{
    background-color:white;
    margin: 5px;
}

.grid-container div div:nth-child(1){
    width: 40%;
}

.grid-container div div:nth-child(2){
    width: 50%;
}

.grid-container div div:nth-child(3){
    width: 10%;
}

<div class="grid-container">
   <div>
         <div>
                Row 1 - Cell 1 (40%)
         </div>
         <div>
                Row 1 - Cell 2 (50%)
         </div>
         <div>
                Row 1 - Cell 3 (10%)
         </div>
   </div>
   <div>
         <div>
                Row 2 - Cell 1 (40%)
         </div>
         <div>
                Row 2 - Cell 2
         </div>
         <div>
                Row 3 - Cell 3
         </div>
   </div>
</div>

​