CSS Grid lernen für Anfänger
CSS Grid einfach erklärt mit Beispielen
Mit CSS Grid kannst du moderne, flexible und responsive Layouts erstellen. In diesem Beitrag lernst du die Grundlagen von CSS Grid für Anfänger und siehst anhand praktischer Beispiele, wie du Zeilen, Spalten und komplette Webseiten-Strukturen sauber aufbaust. Wenn du zusätzlich flexible Anordnungen innerhalb von Reihen brauchst, schau dir auch unser CSS Flexbox Tutorial an.
Grundstruktur von CSS Grid
<div class="beispiel">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
<style>
.beispiel {
display: grid;
}
</style>
Die wichtigsten CSS-Grid-Eigenschaften
| Eigenschaft | Mögliche Werte | Beschreibung |
|---|---|---|
display |
grid, inline-grid |
Aktiviert CSS Grid im Container |
grid-template-columns |
100px, 1fr, repeat(3, 1fr) |
Legt die Spalten des Grids fest |
grid-template-rows |
100px, auto, repeat(2, 1fr) |
Legt die Zeilen des Grids fest |
gap |
Pixel, z.B. 10px, 20px |
Bestimmt den Abstand zwischen Grid-Items |
justify-items |
start, center, end, stretch |
Richtet Grid-Items horizontal aus |
align-items |
start, center, end, stretch |
Richtet Grid-Items vertikal aus |
justify-content |
start, center, space-between, space-around, space-evenly |
Richtet das gesamte Grid auf der Hauptachse aus |
grid-column |
1 / 3, span 2 |
Ein Element über mehrere Spalten platzieren |
grid-row |
1 / 3, span 2 |
Ein Element über mehrere Zeilen platzieren |
grid-template-areas |
Textbasierte Bereichsnamen | Ermöglicht ein benanntes Layout-System |
Erklärungen zu ausgewählten CSS-Grid-Eigenschaften
grid-template-columns
Mit grid-template-columns legst du fest, wie viele Spalten dein Grid hat und wie breit sie sind. Das ist eine der wichtigsten Eigenschaften im CSS Grid, weil du damit die Grundstruktur des Layouts definierst.
<style>
.beispiel {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
</style>
Beispiel: Die Items werden in drei gleich große Spalten aufgeteilt.
grid-template-rows
Mit grid-template-rows bestimmst du die Zeilenhöhe im Grid. So kannst du einzelne Zeilen gezielt größer oder kleiner machen und dein Layout präzise steuern.
<style>
.beispiel {
display: grid;
grid-template-rows: 120px 200px 80px;
}
</style>
Beispiel: Die einzelnen Zeilen werden mit unterschiedlichen Höhen angeordnet.
gap
gap sorgt für einen gleichmäßigen Abstand zwischen den Grid-Items. Das ist besonders praktisch, weil du nicht jedes Element einzeln mit Margins versehen musst.
<style>
.beispiel {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
</style>
Beispiel: Zwischen den Items entsteht ein Abstand von 20 Pixeln.
justify-items
Mit justify-items richtest du die Inhalte innerhalb der Grid-Zellen horizontal aus. Das ist hilfreich, wenn du Text oder Elemente innerhalb jeder Zelle exakt platzieren möchtest.
<style>
.beispiel {
display: grid;
grid-template-columns: repeat(3, 1fr);
justify-items: center;
}
</style>
Beispiel: Die Items werden innerhalb ihrer Zellen mittig ausgerichtet.
grid-column
Mit grid-column kannst du ein Element über mehrere Spalten strecken. Das ist ideal für Header, breite Bereiche oder hervorgehobene Inhalte im Grid-Layout.
<style>
.beispiel {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.beispiel div:first-child {
grid-column: 1 / 3;
}
</style>
Beispiel: Das erste Item nimmt beide Spalten ein und wird dadurch breiter dargestellt.
grid-row
Mit grid-row kannst du ein Element über mehrere Zeilen platzieren. Dadurch lassen sich größere Inhalte oder besondere Bereiche im Layout hervorheben.
<style>
.beispiel {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.beispiel div:first-child {
grid-row: 1 / 3;
}
</style>
Beispiel: Das erste Item erstreckt sich über zwei Zeilen.
Was bedeutet fr in CSS Grid?
fr bedeutet fraction = Anteil am verfügbaren Platz im Grid.
Einfach erklärt:
Wenn du schreibst:
grid-template-columns: 1fr 2fr;
dann heißt das:
- die erste Spalte bekommt 1 Anteil
- die zweite Spalte bekommt 2 Anteile
Zusammen sind das 3 Anteile.
Ergebnis:
Der verfügbare Platz wird so aufgeteilt:
1fr= 1/32fr= 2/3
Die zweite Spalte ist also doppelt so breit wie die erste.
Wichtiger Punkt:
fr verteilt nur den freien Platz im Grid. Es ist keine feste Pixelangabe.
Beispiel:
grid-template-columns: 1fr 1fr 1fr;
Dann sind alle drei Spalten gleich breit.
Kurz gesagt:
fr = flexibler Anteil des verfügbaren Platzes im CSS Grid.
grid-template-areas
Mit grid-template-areas kannst du dein Layout mit benannten Bereichen strukturieren. Das macht komplexere Seiten übersichtlicher und leichter lesbar.
<style>
.beispiel {
display: grid;
grid-template-columns: 1fr 2fr;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
gap: 10px;
}
.header {
grid-area: header;
}
.sidebar {
grid-area: sidebar;
}
.main {
grid-area: main;
}
.footer {
grid-area: footer;
}
</style>
Beispiel: Das Layout wird mit klar benannten Bereichen aufgebaut. Der Header und Footer nehmen die ganze Breite ein, Sidebar und Main liegen nebeneinander in der Mitte.
CSS Grid im Praxisbeispiel
<style>
.beispiel {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
</style>
Beispiel: Vier Karten werden in einem sauberen Grid-Layout mit zwei Spalten dargestellt.
Tipps & Tricks
- Nutze
display: grid;für komplexe Layouts mit Zeilen und Spalten. - Verwende
gapstatt einzelner Margins für saubere Abstände. - Teste
grid-template-columnsmitrepeat()undfr-Einheiten. - CSS Grid eignet sich besonders gut für Seitenlayouts, Karten und Dashboard-Bereiche.