CSS: 100% отзывчивый прямоугольник из квадратов

Question

Задача состоит в том, чтобы сохранить пропрции прямоугольника и вложенного в него квадратов на скриншоте, чтобы при недостаточной высоте или ширине экрана он уменьшался в размере без необходимости в прокрутке.

В этом примере квадрат полностью отзывчивый как по высоте, так и по ширине http://jsfiddle.net/9ow3ymfz/ Я пытаюсь достичь того же результата, только с прямоугольником и вложенных в него квадратов

На скриншоте видно, что при уменьшении высоты экрана появляется полоса прокрутки, а нужно, чтобы такой прямоугольник из квадратов полностью вписывался в экран как с любой шириной, так и с любой длиной, уменьшаясь при этом в размере при необходимости.

Благодарю!

jsfiddle

#box1 {
  width: 38%;
  padding-top: 38%;
  background-color: #46BC8F;
  float: left;
}

#box2 {
  width: 62%;
  padding-top: 62%;
  background-color: #8AD5BA;
  float: right;
}

#box3 {
  width: 100%;
  padding-bottom: 100%;
  background-color: #59D48B;
  float: right;
}

@media screen and (orientation:landscape) {
  .container {
    height: 100vh;
    width: 100vh;
  }
}

@media screen and (orientation:portrait) {
  .container {
    height: 100vw;
    width: 100vw;
  }
}

.container {
  margin: 0 auto;
}

<div class="container">
  <div id="box1"></div>
  <div id="box2"></div>
  <div id="box3"></div>
</div>

Answer 1

body {
  background: gray;
  height: 100vh;
  overflow: hidden;
  margin: 0;
}

.container {
  display: grid;
  grid-template-areas: 
    'b1 b1 b2 b2 b2'
    'b1 b1 b2 b2 b2'
    '.. .. b2 b2 b2'
    'b3 b3 b3 b3 b3';
  grid-template-rows: 1fr 1fr 1fr 3fr;
  width: 100%;
  height: 100%;
  min-width: 20px;
  min-height: 20px;
  max-width: calc(100vw - 1px);
  max-height: 100vh;
  overflow: hidden;
  border: 1px solid red;
  resize: both;
  box-sizing: border-box;
}

.box {
  display: block;
}

.box:nth-child(1) {
  grid-area: b1;
  background: #46bc8f;
}

.box:nth-child(2) {
  grid-area: b2;
  background: #8ad5ba;
}

.box:nth-child(3) {
  grid-area: b3;
  background: #59d48b;
}

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

Answer 2

CbIPoK2513, я добавил @media screen правило на ориентацию portrait и landscape к вашему коду и почти получилось, только нижний прямоугольник должен быть квадратом и сохранять свои пропорции при маштабировании. Что нужно изменить? Благодарю.

body {
  background: gray;
  height: 100vh;
  /* overflow: hidden; */
  margin: 0;
}

.container {
  display: grid;
  grid-template-areas:
    'b1 b1 b2 b2 b2'
    'b1 b1 b2 b2 b2'
    '.. .. b2 b2 b2'
    'b3 b3 b3 b3 b3';
  grid-template-rows: 1fr 1fr 1fr 3fr;
  width: 100%;
  height: 100%;
  min-width: 20px;
  min-height: 20px;
  max-width: calc(100vw - 1px);
  max-height: 100vh;
  /* overflow: hidden; */
  border: 1px solid red;
  resize: both;
  box-sizing: border-box;
  margin: 0 auto;
}

.box {
  display: block;
}

@media screen and (orientation:landscape) {
  .container {
    height: 100vh;
    width: 100vh;
  }
}

@media screen and (orientation:portrait) {
  .container {
    height: 100vw;
    width: 100vw;
  }
}

.box:nth-child(1) {
  grid-area: b1;
  background: #46bc8f;
}

.box:nth-child(2) {
  grid-area: b2;
  background: #8ad5ba;
}

.box:nth-child(3) {
  grid-area: b3;
  background: #59d48b;
}

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

https://jsfiddle.net/v1f29dca/

БЛОГ НА HUSL

CSS: 100% отзывчивый прямоугольник из квадратов

Ответы (2 шт):