Как расположить блоки таким образом?

Question

[hesy]

Как расположить блоки как на картинке, чтобы при изменении размера страницы они оставались квадратными?

Comments

[Ankhena]

Всегда квадратный блок

[hesy]

Ankhena, спасибо. Но на счет расположения блоков как на картинке я так и не понимаю даже как загуглить. с помощью flex не получается

[Ankhena]

hesy, флексами не очень удобно, лучше гридами

Answer 1

[Aetae]

Можно кстати и обычной табличкой.)

Comments

[hesy]

Громоздко получается, но попробую, спасибо)

[Aetae]

hesy, громоздко? Как раз наоборот.
Ни единого лишнего элемента.

[hesy]

Aetae, как поменять местами эти блоки, то есть наоборот, сделать большой квадрат справа, а два маленьких слева?

Не пойму, где задается параметр расположения, пробовал так:

grid-template-columns: 1fr 2fr;
grid-row: 3/1;

UPD:
Получилось с помощью
direction: rtl;

[Aetae]

Через direction явно делать не стоит, это свойство предназначено для текста.)

Вот раскрыл сокращённую форму до полной, теперь вы просто по названию свойства можете понять что да как там происходит.)
Разберитесь с grid - рано или поздно всё равно придётся.

[hesy]

Aetae, ваш вариант с расположением блока работает отлично, но только не в IE11 :(
Для IE11 как-то по другому нужно прописать или grid не работает в любом случае?

Какая боль эта верстка, господи...

[Aetae]

hesy, про осла в вопросе ничего не было.)
В нём grid работает очень грустно, тот же gap вообще не поддерживается.
Теоретически можно как-то накостылять конкретно для него, но мне лень.
Вот тебе на флексах вариант):