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

[Anonymous]

Мне нужна помощь в создании макета в CSS. Обратите внимание, что это не каменная кладка, в которой элементы в каждой колонне действуют независимо друг от друга. В макете, который я представляю, на положение элемента влияют как другие элементы вдоль блочной, так и линейной оси.
Представьте себе 4 HTML-элемента, расположенных в сетке 2x2.

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

1 2
3 4

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

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

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

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

.main {
width: calc(100% - var(--sidebar-width));
float: left;
}

.sidebar {
width: var(--sidebar-width);
float: right;
}

.one {
background: red;
aspect-ratio: 3 / 2; /* Simulate an image */
}

.two {
background: green;
height: 375px; /* Simulate content */
}

.three {
background: rebeccapurple;
}

.four {
background: darkorange;
clear: right;
}

.five {
clear: both;
background: gray;
}

/* CSS Reset / Styling */

* {
box-sizing: border-box;
}

body {
margin: 0 auto;
font-family: system-ui;
--sidebar-width: 300px;
}

h1 {
line-height: 1;
margin: 0;
}

.box {
padding: 2rem;
color: white;
}

.box span {
border-radius: 2px;
padding: 0.15em 0.5em;
line-height: 1.5;
white-space: nowrap;
}

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

Box 1

Box 2

Box 3
This is always directly under box 1.

Box 4
This is vertically aligned with the top of box 3, unless box 2 pushes it down.

Box 5
This is directly under box 3 or box 4.

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