How to design HTML page with 3 squares (1:1) and 1 rectangle (remaining height)

Question

How can I design my page such as this picture ?

Here my html code (rectangle can't be the remaining height size) :

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

display:grid does exactly what you want.

And 33.3vw is the side length of the biggest square, that fits in the space.

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>