Home » Webdesign lernen » 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.

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

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 Items werden in Zeilen mit jeweils 80 Pixel Höhe 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.

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";
}
</style>

Beispiel: Das Layout wird mit klar benannten Bereichen aufgebaut.

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 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.