Zur Flexbox weitere Intems bzw Boxen hinzufügen

Zitat von Sempervivum

Hier wäre eine Begründung wünschenswert, warum Du an dieser Stelle Grid bevorzugst.

Weil Grid sich für zweidimensionale Layouts (also die hier gefragte Anordnung von Elementen neben- und untereinander) besser eignet als Flex.

Zitat

Dadurch wird alles nur unnötig kompliziert und mit jedem Spanning entfernt man sich von der Semantik eines Grid.

Wieso komplizierter? Das gewünschte Layout lässt sich ohne die in #8 genannten zusätzlichen Elemente umsetzen - es reicht ein Element außenrum (section oder article evtl.) und die gewünschten Elemente (Bild, Überschrift, 3 Textblöcke) darin.

Ausgehend von meinem Posting in #8 hier mal wie ich mir das vorstelle.

Mit Flex:

        .flex-container {
            display: flex;
        }

        .flex-item {
            flex: 1;
        }

        #welcome h1,
        #welcome div {
            text-align: center;
        }

    <section id="welcome">
        <img src="images/logo.png">

        <h1>welcome</h1>
        <div class="flex-container">
            <div class="flex-item">1</div>
            <div class="flex-item">2</div>
        </div>
        <div>3</div>
    </section>

Und mit Grid:

        #welcome {
            display: grid;
            grid-template-columns: 1fr 1fr;
        }

        #welcome img,
        #welcome h1,
        #welcome div.bottom {
            grid-column: 1/3;
        }

        #welcome h1,
        #welcome div {
            text-align: center;
        }

    <section id="welcome">
        <img src="images/logo.png">

        <h1>welcome</h1>
        <div>1</div>
        <div>2</div>
        <div class="bottom">3</div>
    </section>

Zitat von Sempervivum

Ausgehend von meinem Posting in #8 hier mal wie ich mir das vorstelle.

Ich hatte die gewünschte Darstellung nicht genau gelesen bzw. falsch verstanden. Ich war davon ausgegangen dass es quasi drei Spalten geben soll, links Block 1, rechts Block 2 (jeweils auf die ganze Höhe) und in der Mitte Bild, Überschrift und Block 3 - und das hätte sich mit grid-template-areas gut lösen lassen.

Warum du jetzt allerdings immer noch flex bevorzugst obwohl das ja ein Element mehr braucht, ist mir nicht so ganz klar.

Zitat

Warum du jetzt allerdings immer noch flex bevorzugst obwohl das ja ein Element mehr braucht, ist mir nicht so ganz klar.

Wie früher schon geschrieben, es nimmt sich nichts. Mit jedem Spanning entfernt man sich von der Semantik eines Grid und das Layout wird unübersichtlicher.