CSS-Layout: Zeilenlücke verhindern, wenn die Spaltenhöhe der Seitenleiste die Hauptspaltenhöhe überschreitet [Duplikat] ⇐ HTML

[Guest]

Bitte um Unterstützung beim Erstellen eines Layouts in CSS. Bitte beachten Sie, dass es sich hierbei nicht um ein Mauerwerkslayout handelt, bei dem die Elemente in jeder Spalte unabhängig voneinander funktionieren. Im Layout stelle ich mir vor, dass die Position eines Elements sowohl von anderen Elementen entlang der Block- als auch von der Inline-Achse beeinflusst wird.
Stellen Sie sich 4 HTML-Elemente vor, die in einem 2x2-Raster angeordnet sind.

Code: Select all

1 2
3 4

• Element 3 sollte immer direkt unter Element 1 ohne Lücke dazwischen liegen .
• Wenn die Höhe von Element 2 die Höhe von Element 1 überschreitet, sollte sich Element 4 direkt unter Element 2 ohne Lücke dazwischen befinden .

• Wenn die Höhe von Element 2 geringer ist als die Höhe von Element 1, sollte die Oberseite von Element 4 vertikal mit der Oberseite von Element 3 übereinstimmen (es sollte eine Lücke zwischen 2 und 4 bestehen).

• < li>Gehen Sie davon aus, dass die Höhen von 1, 2, 3 und 4 alle unbekannt sind. Gehen Sie also davon aus, dass für kein Element feste Höhen festgelegt werden können.
• Gehen Sie davon aus, dass JavaScript möglicherweise nicht verwendet werden.

Wie würden Sie dieses Layout mit CSS Grid oder Flexbox erstellen?
Ich habe es mit Floats geschafft (siehe Code-Snippet), würde aber lieber CSS Grid verwenden , Flexbox, CSS Multi-Column oder eine andere CSS-Layoutmethode.

Code: Select all

.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;
}

Code: Select all

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.