Search code examples
javascripthtmlcssgrid

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

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

enter image description here

enter image description here

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.

Solution

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

    *, *::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; }
    <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>