Как создать HTML-страницу с 3 квадратами (1: 1) и 1 прямоугольником (оставшаяся высота)

Question

Как я могу оформить свою страницу, например, эту картинку?

Вот мой HTML-код (прямоугольник не может быть размером с оставшуюся высоту):

<!-- rectangle -->
<div style="width: calc(100%/1); height: calc(100% - ((100%/3)*2)); float:left; position:relative; ">
   <img style="object-fit:cover; width: calc(100%); height: calc(100%); padding: 1px; position: absolute;" src="imageURL1"/>
</div>

<!-- 3 squares -->
<div style="width: calc(100%/3); padding-bottom: calc(100%/3); float:left; position:relative; ">
    <img style="object-fit:cover; width: calc(100%); height: calc(100%); padding: 1px; position: absolute;" src="imageURL1"/>           
</div>
<div style="width: calc(100%/3); padding-bottom: calc(100%/3); float:left; position:relative; ">
    <img style="object-fit:cover; width: calc(100%); height: calc(100%); padding: 1px; position: absolute;" src="imageURL1"/>           
</div>
<div style="width: calc(100%/3); padding-bottom: calc(100%/3); float:left; position:relative; ">
    <img style="object-fit:cover; width: calc(100%); height: calc(100%); padding: 1px; position: absolute;" src="imageURL1"/>           
</div>

Answer 1

Вы можете как сделать

body,
html {
  margin: 0;
  height: 100%;
}
* {
  box-sizing: border-box;
}

.box {
  height: 100vh;
  display: flex;
  flex-wrap: wrap;
  padding: 5px;
  width: 600px;
}

.inner {
  border: 3px solid #333;
  height: 100%;
}

.column {
  flex-basis: 33.33333%;
  height: 33.33333%;
  padding: 0 2px;
}

.column.small {
  height: 200px;
}

.column.full {
  flex-basis: 100%;
  height: calc(100% - 200px);
  padding-bottom: 5px;
}

<div class="box">
  <div class="column full">
    <div class="inner"></div>
  </div>
  <div class="column small">
    <div class="inner"></div>
  </div>
  <div class="column small">
    <div class="inner"></div>
  </div>
  <div class="column small">
    <div class="inner"></div>
  </div>
</div>

Answer 2

display:grid делает именно то, что вы хотите.

И 33.3vw - длина стороны самого большого квадрата, который помещается в пространство.

html,
body {
  height: 100%;
  margin: 0;
}

body {
  display: grid;
  grid-template-areas: 'rect rect rect' 'left center right';
  grid-template-rows: auto min-content;
}

.rect {
  grid-area: rect;
}

.left {
  grid-area: left;
  width: 33.3vw;
  height: 33.3vw;
}

.center {
  grid-area: center;
  width: 33.3vw;
  height: 33.3vw;
}

.right {
  grid-area: right;
  width: 33.3vw;
  height: 33.3vw;
}


/*just to highlight the position*/

div {
  border: thin black solid;
}

<div class="rect">Rectangle</div>
<div class="left">Left</div>
<div class="center">Center</div>
<div class="right">Right</div>