CSS grid position children of children

Question

I am wondering is it possible to position in the grid the children of children of the grid container?

let's say i have my elements hierarchy like this:

<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>

I want cells from grid-item-3 to be functioning as if they were direct children of grid-container.

Or should i separately handle each child-container of grid-items?

Answer 1

Are you looking for this?

.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>