Html CSS网格定位子对象的子对象

我想知道是否有可能在网格中定位网格容器子容器的子容器

假设我的元素层次结构如下：

<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容器{
宽度：100%；
填充物：5px；
背景颜色：灰色；
}
.网格容器分区{
背景颜色：黄色；
填充物：5px；
显示器：flex；
宽度；100%；
}
.网格容器分区{
背景色：白色；
保证金：5px；
}
.grid容器分区：第n个子项（1）{
宽度：40%；
}
.grid容器分区：第n个子项（2）{
宽度：50%；
}
.grid容器分区：第n个子项（3）{
宽度：10%；
}

第1行-单元1（40%）
第1行-单元2（50%）
第1行-第3单元（10%）
第2行-单元1（40%）
第2行-单元格2
第3行-第3单元
你在找这个吗


.grid容器{
宽度：100%；
填充物：5px；
背景颜色：灰色；
}
.网格容器分区{
背景颜色：黄色；
填充物：5px；
显示器：flex；
宽度；100%；
}
.网格容器分区{
背景色：白色；
保证金：5px；
}
.grid容器分区：第n个子项（1）{
宽度：40%；
}
.grid容器分区：第n个子项（2）{
宽度：50%；
}
.grid容器分区：第n个子项（3）{
宽度：10%；
}

第1行-单元1（40%）
第1行-单元2（50%）
第1行-第3单元（10%）
第2行-单元1（40%）
第2行-单元格2
第3行-第3单元
不，这不是我想要的功能。我将尝试编辑我的答案，并提供更多细节。抱歉）这甚至没有使用css网格…不，这不是我想要的功能。我将尝试编辑我的答案，并提供更多细节。抱歉）这甚至没有使用css网格。。。