Im ersten Teil haben wir das Grundgerüst unserer Website gebaut – mit Wrapper, Header, Hauptbereich und Footer. Jetzt ordnen wir die Inhalte besser an: Der Hauptbereich bekommt eine zweispaltige Aufteilung mit einem Inhaltsbereich links und einer Sidebar rechts.
Dafür nutzen wir CSS Grid. Grid ist ein mächtiges Layout-System, mit dem sich Inhalte in Zeilen und Spalten anordnen lassen – präzise und flexibel. In diesem Teil konzentrieren wir uns auf ein einfaches, aber typisches Desktop-Layout.
Kurzer Hinweis vorab: Dieses Layout ist noch nicht für Smartphones optimiert. Auf kleinen Bildschirmen werden die beiden Spalten nebeneinander dargestellt, auch wenn der Platz dafür nicht reicht. Das ist kein Fehler – wir bauen hier bewusst zuerst ein Desktop-Layout, damit du verstehst, wie Inhalte in Spalten angeordnet werden. Responsive Design kommt im fünften Teil.
Die zweispaltige Website – Beispiel 2Was sich in der HTML-Struktur ändert
Gegenüber Teil 1 kommt ein neues Element hinzu: ein <div class="layout">, das <main> und <aside> gemeinsam umschließt. Dieses Wrapper-Element ist der Grid-Container – er steuert, wie seine direkten Kinder (Hauptinhalt und Sidebar) nebeneinander angeordnet werden.
<div class="layout">
<main class="main-content">
<section class="box">
<h2>Willkommen</h2>
<p>
Im ersten Teil haben wir das Grundgerüst der Website gebaut.
Jetzt ordnen wir die Inhalte besser an.
</p>
</section>
<section class="box">
<h2>Der Hauptinhalt</h2>
<div class="content-block">
<h3>Was ist ein Layout?</h3>
<p>
Ein Layout bestimmt, wo die Bereiche einer Seite stehen.
Zum Beispiel: Header oben, Inhalt links und Zusatzinfos rechts.
</p>
</div>
<div class="content-block">
<h3>Warum ist das wichtig?</h3>
<p>
Mit einem guten Layout wirkt eine Website sofort klarer,
ordentlicher und leichter lesbar.
</p>
</div>
</section>
</main>
<aside class="sidebar">
<div class="box">
<h2>Sidebar</h2>
<p>
Hier können später Links, Hinweise oder kleine Infos stehen.
</p>
</div>
<div class="box">
<h3>Nächste Schritte</h3>
<p>
Im nächsten Teil können wir die Seite mit weiteren Inhalten füllen.
</p>
</div>
</aside>
</div>
<main> und <aside> sind semantische HTML-Elemente: <main> enthält den eigentlichen Seiteninhalt, <aside> steht für ergänzende Informationen, die neben dem Hauptinhalt stehen – klassisch die Sidebar. Das <div class="layout"> drumherum ist der Grid-Container, der beide Kinder in Spalten anordnet.
CSS Grid – das neue CSS
Das Herzstück des neuen Layouts ist diese eine CSS-Regel:
.layout {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 2rem;
margin-top: 2rem;
align-items: start;
}
Mit display: grid wird .layout zum Grid-Container. Seine direkten Kinder – .main-content und .sidebar – werden automatisch zu Grid-Elementen und reihen sich in die definierten Spalten ein.
grid-template-columns: 2fr 1fr legt fest, wie breit die beiden Spalten sind. Die Einheit fr steht für fraction – also einen Bruchteil des verfügbaren Platzes. 2fr 1fr bedeutet: Der Hauptinhalt bekommt zwei Drittel, die Sidebar ein Drittel der verfügbaren Breite. Der Browser rechnet das automatisch aus – du musst keine festen Pixel angeben.
gap: 2rem setzt den Abstand zwischen den Spalten. Das ist praktischer als Margins auf den einzelnen Elementen, weil der Abstand nur zwischen den Spalten wirkt – nicht außen.
align-items: start sorgt dafür, dass beide Spalten oben bündig beginnen und nicht auf die Höhe der jeweils anderen gestreckt werden. Ohne diese Angabe würde die Sidebar genauso hoch werden wie der Hauptinhalt – auch wenn sie weniger Inhalt hat.
Das vollständige CSS
Gegenüber Teil 1 haben wir im CSS nur wenige Ergänzungen vorgenommen. Der Großteil bleibt unverändert – wir erweitern, statt alles neu zu schreiben.
html {
font-size: 62.5%;
}
body {
margin: 0;
font-size: 1.6rem;
font-family: Arial, sans-serif;
background-color: whitesmoke;
color: #222;
line-height: 1.6;
}
.wrapper {
width: 90%;
max-width: 90rem;
margin: 0 auto;
}
.header {
background-color: lightblue;
padding: 3rem 2rem;
margin-top: 2rem;
border-radius: 0.8rem;
}
/* Neu in Teil 2: Grid-Container */
.layout {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 2rem;
margin-top: 2rem;
align-items: start;
}
.box {
background-color: white;
padding: 2rem;
margin-bottom: 2rem;
border-radius: 0.8rem;
}
.content-block {
margin-top: 1.5rem;
padding: 1.5rem;
background-color: lavenderblush;
border-radius: 0.6rem;
}
h1 {
margin-top: 0;
font-size: 3.2rem;
}
h2 {
margin-top: 0;
font-size: 2.4rem;
}
h3 {
margin-top: 0;
font-size: 1.8rem;
}
.footer {
text-align: center;
padding: 2rem;
margin-bottom: 2rem;
background-color: cornsilk;
border-radius: 0.8rem;
}
Der einzige wirklich neue Block ist .layout. Alles andere kennst du bereits aus Teil 1. Das zeigt ein wichtiges Prinzip: Ein gutes CSS-Grundgerüst lässt sich schrittweise erweitern, ohne von vorne anfangen zu müssen.
Warum fr statt Prozent oder Pixel?
Du könntest die Spaltenbreiten auch in Prozent angeben – zum Beispiel 66% 33%. Das würde auf den ersten Blick ähnlich aussehen. Der Unterschied liegt im gap: Wenn du Prozent verwendest und dazu noch einen Abstand zwischen den Spalten setzt, kann die Gesamtbreite schnell über 100 % steigen. Der Browser müsste dann umbrechen oder die Breiten stauchen.
Die fr-Einheit ist schlauer: Sie verteilt nur den Platz, der nach dem gap noch übrig ist. 2fr 1fr mit gap: 2rem bedeutet also: Erst werden die 2rem Abstand abgezogen, dann wird der Rest im Verhältnis 2:1 aufgeteilt. Das funktioniert immer sauber, ohne Rundungsfehler.
Was <aside> bedeutet
Das <aside>-Element ist ein semantisches HTML-Tag. Es signalisiert dem Browser – und auch Suchmaschinen und Screenreadern –, dass dieser Bereich ergänzende Informationen enthält, die nicht zum Hauptinhalt gehören. Eine Sidebar mit weiterführenden Links, Hinweisen oder Zusammenfassungen ist ein typischer Anwendungsfall.
Du hättest stattdessen auch <div class="sidebar"> schreiben können – das würde optisch genauso aussehen. Aber <aside> ist die semantisch korrektere Wahl, weil es die Bedeutung des Bereichs klar benennt. HTML ist nicht nur für den Browser, sondern auch für alles, was HTML liest.
Und auf dem Smartphone?
Wenn du die Seite auf einem Smartphone aufrufst, wirst du sehen: Die zwei Spalten bleiben nebeneinander – auch wenn der Platz dafür zu eng ist. Das ist ein bekanntes Problem mit Desktop-Layouts, die noch kein Responsive Design haben.
Das lösen wir im fünften Teil mit Media Queries. Dort lernen wir, wie das Layout auf kleinen Bildschirmen auf eine einzige Spalte umschaltet. Für jetzt reicht es, zu verstehen, wie das Grid-Prinzip funktioniert – bevor wir es anpassungsfähig machen.