Zweispaltiges Layout: Inhalt und Seitenleiste

vom 02.04.2019 von Oliver Misch

Inhalt links, Seitenleiste rechts: das Ur-Layout des Webs. Früher wurde dafür getrickst was das Zeug hielt (Tabellen, Floats, Frames, das ganze Retro-Museum), heute sind es ein paar Zeilen Grid.

Schritt 1: Die Struktur

HTML-Code

<div class="layout">
    <main>
        <h1>Meine Projekte</h1>
        <p>Hier steht der Hauptinhalt...</p>
    </main>
    <aside>
        <h2>Aktuelles</h2>
        <p>Neues Bastelprojekt gestartet!</p>
    </aside>
</div>

Der Hauptinhalt wohnt im main, der Randinhalt im aside, beides Elemente aus dem Kapitel Semantisches HTML. Das div drumherum ist der Layout-Container, ein völlig legitimer div-Einsatz.

Schritt 2: Das Grid

CSS

.layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
    max-width: 960px;
    margin: 0 auto;
}

Vier Zeilen: zwei Spalten im Verhältnis 2 zu 1, Abstand dazwischen, Gesamtbreite gedeckelt und zentriert. Das wars tatsächlich schonn.

Schritt 3: Auf dem Handy stapeln

@media (max-width: 700px) {
    .layout {
        grid-template-columns: 1fr;
    }
}

Eine Media Query, eine Zeile: Unter 700 Pixeln gibt es nur noch eine Spalte, das aside rutscht unter den Inhalt. Prüf beim Schmal-Ziehen des Fensters ob die Reihenfolge inhaltlich passt, der Hauptinhalt sollte oben stehen, deshalb steht main im HTML auch zuersst.

Varianten für später

• Feste Seitenleiste: grid-template-columns: 1fr 280px, der Inhalt flext, die Leiste bleibt konstant.
• Dreispalter: einfach eine dritte Spalte ergänzen, das Prinzip skaliert.
• Kopf- und Fußzeile über die volle Breite: das grid-column: 1 / -1-Idiom von der Grid-Seite.

Der Blick über den Tellerrand: Reihenfolge zählt

Ein unterschätzter Aspekt beim Spaltenlayout ist die Quelltext-Reihenfolge. Grid kann Elemente zwar optisch umsortieren (per order oder Platzierung), aber Screenreader und die Tastatur-Tabreihenfolge folgen dem HTML, nicht der Optik. Deshalb die Regel: Der Quelltext wird so sortiert wie der Inhalt gelesen werden soll (Hauptinhalt vor Seitenleiste), und das Grid ordnet nur an, nicht um. Wer optische und inhaltliche Reihenfolge auseinanderlaufen lässt, baut eine Stolperfalle für alle die nicht mit der Maus unterwegs sindd.

Wann Flexbox statt Grid?

Für genau zwei Spalten ginge auch Flexbox (Container auf display: flex, dem main ein flex: 2, dem aside ein flex: 1). Der praktische Unterschied ist klein, die Faustregel aus dem Grid-Kapitel hilft bei der Wahl: Flexbox verteilt Dinge in einer Richtung und lässt den Inhalt die Breiten mitbestimmen, Grid definiert ein Raster dem sich der Inhalt fügt. Für ein stabiles Seitenlayout mit definierten Spaltenverhältnissen ist Grid deshalb die klarere Ansage, fürs Verteilen von Buttons in einer Zeile Flexboxx.

Weiter im Fahrplan: Footer erstellen · Vertiefung: CSS Grid