Auf dem Bild sind die Boxen ja einfach nebeneinander angeordnet.
Ich habe mich mal an diesem orientiert:
ZitatDie Boxen sollen rein ich sag einfach mal
box1 box2
box3
box 4
box 5 - 7
und das wieder im Seiteninspektor eingerichtet.
HTML
<section id="my-new-section">
<h1>Übung</h1>
<div class="horizontal">
<div class="box1">Box1</div>
<div class="box1">Box2</div>
</div>
<div class="box1">Box3</div>
<div class="box1">Box4</div>
<div class="horizontal">
<div class="box1">Box5</div>
<div class="box1">Box6</div>
<div class="box1">Box7</div>
</div>
</section>
Alles anzeigen
Damit das Styling der Boxen auch wirkt, wenn diese in einem weiteren Container stecken, musst Du statt des Pfeils ">" jetzt ein Leerzeichen im Selektor verwenden:
Code
#my-new-section .box1 {
display: column; /* <-- das gibt es nicht, der Browser erkennt es als fehlerhaft. */
/* align-self: flex-start; */
margin-left: 30px;
width: 250px;
height: 80px;
row-gap: 5px;
background-color: pink;
}
Und dann die Boxen in den beiden Wrappern mit der Klasse "horizontal" nebeneinander anordnen:
Ich hoffe, ich habe nichts vergessen.
Dann sieht es so aus: