CSS Grid

CSS Grid ist ein leistungsstarkes Layout-System, das es ermöglicht, Webseiteninhalte in einem zweidimensionalen Raster anzuordnen – sowohl horizontal (Zeilen) als auch vertikal (Spalten). Im Gegensatz zu Flexbox, das primär für eindimensionale Layouts gedacht ist (entweder Reihe oder Spalte), erlaubt Grid die präzise Steuerung beider Achsen gleichzeitig. Das macht es ideal für komplexere Layouts, wie z. B. Galerien, Dashboards oder ganze Seitenbereiche.

Unterschiede Grid zu Flexbox:

Eigenschaft Flexbox Grid
Achse Eindimensional (Zeile oder Spalte) Zweidimensional (Zeile und Spalte)
Anwendung Für einzelne Inhaltsreihen oder -spalten Für komplette Layoutbereiche oder Raster
Positionierung Reihenfolge im HTML wichtig Positionierung unabhängig vom HTML möglich

Beispiel 1: Grid mit Überschrift und drei Spalten darunter

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Grid-Layout 3 Spalten</title>

<style>
  .layout {
    display: grid;
    grid-template-rows: auto 1fr;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    background-color: #111;
    padding: 20px;
    color: white;
  }

  .layout h2 {
    grid-column: 1 / -1; /* Überschrift über alle Spalten */
    font-size: 24px;
    margin: 0;
	background-color: #0099ff;
  }

  .layout .spalte {
    background-color: #40fe2a;
    padding: 20px;
    border-radius: 12px;
	color: black;
  }
</style>
</head>
<body>


<div class="layout">
  <h2>Unsere drei Vorteile</h2>
  <div class="spalte">Schnell</div>
  <div class="spalte">Einfach</div>
  <div class="spalte">Flexibel</div>
</div>

</body>
</html>
Beispiel bc009

Mit gap: 20px; erhalten wir einen Abstand von 20px zwischen alle Zellen im Grid. Diese Abstände gelten sowohl horizontal als auch vertikal. Das Grid erzeugt diesen Abstand intern, ganz unabhängig vom HTML-Quelltext. Du brauchst keine Margins oder Leerzeichen im HTML – das gap regelt alles automatisch. Falls du z. B. horizontalen Abstand, also nur Spaltenabstände (und keine Zeilenabstände) willst, kannst du stattdessen schreiben: column-gap: 20px; row-gap: 0; oder kurz gap: 0 20px;

Beispiel 2: Einfache Galerie mit Grid

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Grid-Layout 3 Spalten</title>

<style>
  .galerie {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    padding: 20px;
  }

  .galerie div {
    background-color: #0094ff;
    height: 150px;
    border-radius: 12px;
  }
</style>
</head>
<body>


<div class="galerie">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

</body>
</html>
Beispiel bc010

  • grid-template-columns: repeat(4, 1fr) → vier gleich breite Spalten
  • gap → Abstand zwischen den Grid-Elementen
  • Ideal für Bild- oder Kartengalerien

    • Wir haben 16 Container in der Galerie. Da wir mit repeat(4, 1fr) angegeben haben, dass wir vier gleiche Spalten wünschen, ergibt dies 4 gleiche Zeilen. Schreibe das Beispiel mit 14 Containern und sieh was geschieht.

    Bedeutung von 1fr:

  • 1fr steht für einen flexiblen Anteil des verbleibenden Platzes im Grid.
  • Wenn du z. B. grid-template-columns: 1fr 1fr 1fr verwendest, teilt Grid den verfügbaren Platz gleichmäßig in drei Spalten auf – jede bekommt ein Drittel.
  • fr funktioniert ähnlich wie %, ist aber intelligenter, da es nur den freien Platz verteilt (nach Abzug von Padding, Gaps, fixen Breiten etc.).

    • Sadipscing elitr, sed diam nonumy eirmod.