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.

Weiter im Fahrplan: Footer erstellen · Vertiefung: CSS Grid