How to create banner from 4 grid elements each has 4 child elements

may you help me how to recreate my idea from image.

I don't understand the prince of selecting and placing others elements and after unselecting to put back...

I tried to use grid but it doesn't work well...

First of all this is my code that shows me the child elements

  function toggleAdditionalGrid(clickedElement) {
  var section = clickedElement.closest('.shopify-section');
  var additionalGrid = section.querySelector('.dt-sc-additional-grids');
  if(window.innerWidth<1020){
              if(additionalGrid.style.display=='none' ){
                  additionalGrid.style.cssText='display: flex; flex-wrap: wrap;justify-content: center;flex-direction: column;align-content: center;';
                }
              else {
                console.log(window.innerWidth);
               additionalGrid.style.cssText='display: none; grid-template-columns: repeat(4, 25%) !important; margin: auto; width: 100% !important;justify-content: center !important; @media (max-width: 1020px) {display: none; flex-wrap: wrap;justify-content: center;flex-direction: column;align-content: center;}';
              }
  }
 else{
              if(additionalGrid.style.display=='none' ){
                additionalGrid.style.cssText='display: inline-grid; grid-template-columns: repeat(4, 25%) !important; margin: auto; width: 100% !important;justify-content: center !important;';
              }
            else{
                console.log(window.innerWidth);
             additionalGrid.style.cssText='display: none; grid-template-columns: repeat(4, 25%) !important; margin: auto; width: 100% !important;justify-content: center !important; @media (max-width: 1020px) {display: grid;grid-template-columns: repeat(1, 100%) ;justify-content: center;flex-direction: column;align-content: center;}';
            }
    }
};

So i just need a code that will expand clicked element and show child elements.

You could use Flexbox layout to construct a "grid", rather than using display: grid.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

*, *::before, *::after {
box-sizing: border-box;
}
* {
font-family: Arial;
}
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.grid {
display: flex;
flex-direction: column;
flex: 1;
padding: 1rem;
gap: 1rem;
height: 100%;
}
.row {
display: flex;
flex-direction: row;
flex: 1;
gap: 1rem;
}
.col {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex: 1;
}
.flex-2 {
flex: 2;
}
.bg-red    { background: #FF2222; color: #FFF; }
.bg-orange { background: #FF6422; color: #FFF; }
.bg-brown  { background: #441212; color: #FFF; }
.fs-1 { font-size: 1rem; }
.fs-2 { font-size: 2rem; }
.fs-3 { font-size: 3rem; }

<!-- language: lang-html -->

<div class="grid">
<div class="row flex-2 bg-red fs-3">
<div class="col">Selected</div>
</div>
<div class="row">
<div class="col bg-orange fs-1">Child</div>
<div class="col bg-orange fs-1">Child</div>
<div class="col bg-orange fs-1">Child</div>
<div class="col bg-orange fs-1">Child</div>
</div>
<div class="row">
<div class="col bg-brown"></div>
<div class="col bg-brown"></div>
<div class="col bg-brown"></div>
</div>
</div>

<!-- end snippet -->