CSS Grid: Ein Leitfaden für zweidimensionale Layouts

CSS Grid Layout ist das leistungsstärkste Layoutsystem, das in CSS verfügbar ist. Im Gegensatz zu Flexbox, das für eindimensionale Ausrichtungen (Reihen oder Spalten) optimiert ist, ist CSS Grid ein zweidimensionales System. Das bedeutet, dass es gleichzeitig Zeilen (horizontal) und Spalten (vertikal) steuern kann.

Mit Grid können Sie komplexe, rasterbasierte Layouts erstellen, die sich flexibel an unterschiedliche Bildschirmgrößen anpassen.

1. Grundlegendes Setup

Wie bei Flexbox wird das Grid-Layout auf dem Eltern-Element (Grid-Container) aktiviert. Alle direkten Kind-Elemente werden dadurch zu Grid-Items.

.grid-container {
  display: grid; /* Aktiviert das Grid-Layout */
  /* display: inline-grid; -- Erstellt ein Inline-Level Grid */
}

2. Das Raster definieren (Spalten und Zeilen)

Sie definieren die Struktur des Rasters, indem Sie die Anzahl und Größe der Spalten und Zeilen festlegen.

Die fr-Einheit (Fractional Unit)

Die fr-Einheit repräsentiert einen Bruchteil des verfügbaren Platzes im Grid-Container. Sie ist ideal für flexible, responsive Spalten.

.grid-container {
  display: grid;
  /* Erstellt drei Spalten: 150px breit, die zweite nimmt 1 Teil des restlichen Platzes, die dritte 2 Teile */
  grid-template-columns: 150px 1fr 2fr;
  
  /* Erstellt zwei Zeilen mit jeweils 100px Höhe */
  grid-template-rows: 100px 100px;
}

Die repeat()-Funktion

Um die Definition von Rastern mit vielen gleichen Spalten oder Zeilen zu vereinfachen, gibt es die repeat()-Funktion.

.grid-container {
  /* Erstellt ein symmetrisches 12-Spalten-Raster */
  grid-template-columns: repeat(12, 1fr);
  
  /* Abstand zwischen Spalten und Zeilen (früher 'grid-gap') */
  gap: 1rem; 
}

3. Positionierung von Grid-Items

Standardmäßig platziert der Browser jedes Kind-Element in einer eigenen Rasterzelle. Sie können jedoch festlegen, dass ein Element mehrere Spalten oder Zeilen überspannen soll.

.header {
  /* Lässt das Element von Spaltenlinie 1 bis 4 laufen (umspannt 3 Spalten) */
  grid-column-start: 1;
  grid-column-end: 4;
}

/* Kurzschreibweise mit 'span' */
.sidebar {
  /* Umspannt 3 Spalten ab der aktuellen Position */
  grid-column: span 3;
}

.main-content {
  /* Umspannt 9 Spalten */
  grid-column: span 9;
}

4. Das implizite Grid (grid-auto-rows/columns)

Wenn Sie mehr Elemente in den Container einfügen, als im expliziten Grid definiert sind, erstellt der Browser automatisch neue Zeilen oder Spalten (das implizite Grid). Mit grid-auto-rows und grid-auto-columns können Sie deren Standardgröße festlegen.

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  
  /* Jede automatisch erstellte Zeile erhält eine Höhe von 200px */
  grid-auto-rows: 200px;
}

5. Das "Magic Grid" (Responsive ohne Media Queries)

Eine der mächtigsten Techniken in CSS Grid ist die Erstellung eines vollkommen responsiven Rasters, das sich automatisch an die Bildschirmbreite anpasst, ohne dass eine einzige Media Query benötigt wird.

Dies wird durch die Kombination von repeat(), auto-fit (oder auto-fill) und der minmax()-Funktion erreicht.

.responsive-grid {
  display: grid;
  /* Erstellt so viele Spalten wie möglich, die mindestens 250px breit sind, aber gleichmäßig wachsen, um den Platz auszufüllen */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}

• auto-fit: Füllt die Zeile mit so vielen Spalten wie möglich aus. Wenn freier Platz vorhanden ist, dehnen sich die Spalten aus, um ihn zu füllen.
• minmax(250px, 1fr): Jede Spalte ist mindestens 250px breit. Wenn mehr Platz vorhanden ist, wächst sie gleichmäßig (1fr).

Fazit

CSS Grid ist das ultimative Werkzeug für komplexe Seitenlayouts und responsive Raster. Es ermöglicht eine präzise Steuerung in zwei Dimensionen und reduziert den Bedarf an verschachtelten HTML-Containern und komplizierten CSS-Hacks erheblich. In Kombination mit Flexbox bietet es die perfekte Grundlage für modernes Webdesign.