Please help me to recreate this LAYOUT

[Georgich]

I want to recreate this layout. Probably i need flexbox css for rows and columns

Please help me with this )

[be3designs]

I just did this myself with Steve Woody’s help by using Global Blocks to create the rows with columns! It was for a header where there is one bar with two containers. The first container is for the larger square (in my case, a logo), and then I dropped the Global Block element into the second container.

Within the Global Block itself, it has two rows, with each row using the 1/2 + 1/2 columns.

[Georgich]

So… what about HEIGHT? )

[Georgich]

Boooom!

Theme options:
SITE MAX WIDTH (PX) - 1200 px

Column 1 - 576 x 576 px

$el {
  display: flex !important; 
  justify-content: center !important;
  flex-direction: column !important;
  height: 576px;
  box-shadow: 0 5px 25px rgba(0,0,0,0.1);
}

Column 2 - 576 x 576 px

$el {
  height: 576px !important;
}

Second column with Global Block:

1 ROW WITH 4 COLUMNS

Row (Inner container / OFF. Marginless columns / ON)

$el {
  display: flex !important;
  flex-wrap: wrap !important;
  flex-direction: row !important;
  min-height: 100%;
}

Column 1

$el {
  box-shadow: 0 5px 25px rgba(0,0,0,0.1);
  margin-right: 4% !important;
  margin-bottom: 4% !important;
  height: auto;
  display: flex !important; 
  flex-basis: 46% !important;  
  justify-content: center !important;
  flex-direction: column !important;
}

Column 2

$el {
  box-shadow: 0 5px 25px rgba(0,0,0,0.1);
  margin-left: 4% !important;
  margin-bottom: 4% !important;
  height: auto;
  display: flex !important; 
  flex-basis: 46% !important;  
  justify-content: center !important;
  flex-direction: column !important;
}

Column 3

$el {
  box-shadow: 0 5px 25px rgba(0,0,0,0.1);
  margin-right: 4% !important;
  margin-top: 4% !important;
  height: auto;
  display: flex !important; 
  flex-basis: 46% !important;  
  justify-content: center !important;
  flex-direction: column !important;
}

Column 4

$el {
  box-shadow: 0 5px 25px rgba(0,0,0,0.1);
  margin-left: 4% !important;
  margin-top: 4% !important;
  height: auto;
  display: flex !important; 
  flex-basis: 46% !important;  
  justify-content: center !important;
  flex-direction: column !important;
}

WHIS IS A FIRST PART OF CODE. IT S NOT A REALLY RESPONSIVE. Now i will make it responsive using media queries ) Thanks for your message