Резиновые квадраты

Question

Необходимо сверстать 3 блока. 1 большой слева, 2 маленьких справа. Чтобы при любом разрешении они были квадратами и оставались в том же положении. Блоки сверстаны гридами. Подскажите, пожалуйста, как сделать так, чтобы при изменении разрешения данные блоки всегда были квадратами?

Answer 1

1 большой слева, 2 маленьких справа. Чтобы при любом разрешении они были квадратами и оставались в том же положении. Блоки сверстаны гридами. Подскажите, пожалуйста, как сделать так, чтобы при изменении разрешения данные блоки всегда были квадратами?

Как вариант:

.container {
  display: grid;
  grid-template-columns: 1fr 1.6fr 0.5fr 1fr;
  grid-template-rows: 1.2fr 1.2fr 0.6fr;
  gap: 0px 0px;
  grid-template-areas: "one one two two" "one one three three" ". . . .";
}

.one {
  grid-area: one;
  width: 100%;
  padding-top: 100%;
  background-color: red;
}

.two {
  grid-area: two;
  width: 100%;
  padding-top: 100%;
  background-color: blue;
}

.three {
  grid-area: three;
  width: 100%;
  padding-top: 100%;
  background-color: green;
}

<div class="container">
  <div class="one"></div>
  <div class="two"></div>
  <div class="three"></div>
</div>

БЛОГ НА HUSL

Резиновые квадраты

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