Макет CSS: предотвращение разрыва строк, когда высота столбца боковой панели превышает высоту основного столбца ⇐ Html

[Anonymous]

Представьте себе 4 HTML-элемента, расположенных в сетке 2x2.

Код: Выделить всё

1 2
3 4

• Элемент 3 должен всегда находиться непосредственно под элементом 1 без каких-либо промежутков между ними .
• Если высота элемента 2 превышает высоту элемента 1, элемент 4 должен находиться непосредственно под элементом 2 без какого-либо промежутка между ними. .

• Если высота элемента 2 меньше высоты элемента 1, верхняя часть элемента 4 должна совпадать по вертикали с верхней частью элемента 3 (должен быть зазор). между 2 и 4).

• Предположим, что высоты 1, 2, 3 и 4 неизвестны, поэтому предположим, что фиксированные высоты не могут быть установлены ни для одного элемента.
  Предположим, JavaScript нельзя использовать.

Как бы вы создали этот макет с помощью CSS Grid или Flexbox?
У меня есть удалось сделать это с помощью float (см. фрагмент кода), но я бы предпочел использовать CSS Grid, Flexbox, CSS Multi-Column или какой-либо другой метод макета CSS.



Подробнее здесь: https://stackoverflow.com/questions/793 ... lumn-heigh