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 mein CSS Flexbox Tutorial an.

Grundstruktur von CSS Grid

Ein Grid besteht immer aus einem Grid-Container und seinen direkten Kind-Elementen, den Grid-Items:

<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

CSS-Grid-Eigenschaften mit Beispielen

grid-template-columns – Spalten festlegen

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 – Zeilenhöhe bestimmen

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 – Abstand zwischen den Items

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 – Inhalte horizontal ausrichten

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 – über mehrere Spalten

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 – über mehrere Zeilen

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. Der verfügbare Platz wird also so aufgeteilt: 1fr = 1/3 und 2fr = 2/3. Die zweite Spalte ist doppelt so breit wie die erste.

grid-template-areas: Layout mit benannten Bereichen

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.

CSS Grid responsive machen

CSS Grid lässt sich sehr gut responsive einsetzen. Mit einer Media Query wechselst du auf kleinen Bildschirmen einfach auf eine Spalte:

<style>
.beispiel {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

@media (max-width: 768px) {
  .beispiel {
    grid-template-columns: 1fr;
  }
}
</style>

Auf großen Bildschirmen werden die Items in drei Spalten angezeigt. Auf kleineren Geräten wechseln sie automatisch in eine Spalte.

Noch eleganter geht es ganz ohne Media Query mit repeat(auto-fit, minmax()): Das Grid legt so viele Spalten an, wie mit mindestens 200 Pixeln Breite hineinpassen.

.beispiel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

Tipps & Tricks

• Nutze display: grid; für komplexe Layouts mit Zeilen und Spalten.
• Verwende gap statt einzelner Margins für saubere Abstände.
• Teste grid-template-columns mit repeat() und fr-Einheiten.
• CSS Grid eignet sich besonders gut für Seitenlayouts, Karten und Dashboard-Bereiche.