CSS Grid Layout

Diese Dokumentation behandelt die Grundlagen, Eigenschaften und Ausrichtungsmethoden des CSS Grid Layouts basierend auf den Schulungsunterlagen[cite: 14].

Das CSS Grid ist ein zweidimensionales Layout-System[cite: 14]. Die Funktionsweise gliedert sich in drei Schritte[cite: 14]:

1. **Container festlegen:** Ein Element wird durch ''display: grid'' zum Grid Container[cite: 14].
2. **Spuren definieren:** Zeilen und Spalten werden explizit oder implizit eingerichtet[cite: 14].
3. **Elemente platzieren:** Kinder-Elemente (Grid Items) werden in Rasterbereiche eingeordnet[cite: 14].

• Grid Container & Item: Das Elternelement und seine direkten Kindelemente[cite: 14].
• Grid Lines: Die vertikalen und horizontalen Trennlinien des Rasters[cite: 14].
• Grid Cell: Die kleinste Einheit im Raster (eine einzelne Zelle zwischen vier Linien)[cite: 14].
• Grid Area: Ein zusammenhängender Bereich aus einer oder mehreren Zellen[cite: 14].
• Grid Track: Eine einzelne Spalte oder Zeile im Raster[cite: 14].
• Achsen: Inline Axis (horizontal) und Block Axis (vertikal)[cite: 14].

#layout {
  display: grid;
  grid-template-rows: 100px 400px 100px;
  grid-template-columns: 200px 1fr 200px;
}

Für die Längenangaben von Spalten und Zeilen stehen verschiedene Einheiten zur Verfügung[cite: 14]:

• Feste Längen & Prozente: z. B. px, em, %[cite: 14].
• Bruch-Einheiten (Fractional Units - fr): Verteilt den verfügbaren freien Platz flexibel[cite: 14].
• minmax(min, max): Schränkt die Größe auf einen Bereich ein (z. B. minmax(15em, 45em))[cite: 14].
• Inhaltsbasierte Größen: min-content, max-content und auto[cite: 14].
• repeat(): Wiederholt Musterspuren (z. B. repeat(5, 20px 1fr))[cite: 14].
• auto-fill vs. auto-fit: Automatische Berechnung der Wiederholungen. auto-fill behält leere Spuren bei, auto-fit kollabiert leere Spuren[cite: 14].

Browser nummerieren Rasterlinien automatisch von 1 bis zum Ende (sowie negativ von -1 rückwärts)[cite: 14]. Benannte Linien werden in eckigen Klammern angegeben[cite: 14]:

#layout {
  display: grid;
  grid-template-rows: [header-start] 100px [header-end content-start] 400px [content-end];
  grid-template-columns: [ads] 200px [main] 1fr [links] 200px;
}

Mit grid-template-areas lässt sich ein visuelles Layout direkt im CSS definieren[cite: 14]:

#layout {
  display: grid;
  grid-template-areas:
    "header header header"
    "ads    main   links"
    "footer footer footer";
}
 
/* Zuweisung beim Grid Item */
#header { grid-area: header; }
#main   { grid-area: main; }

<note tip> Wenn Bereiche benannt werden, generiert der Browser implizit Liniennamen mit den Suffixen -start und -end (und umgekehrt)[cite: 14]. </note>

Die Eigenschaft grid führt Zeilen- und Spalteninformationen zusammen (Zeilen vor dem Schrägstrich, Spalten danach)[cite: 14]:

#layout {
  display: grid;
  grid: 100px 400px 100px / 200px 1fr 200px;
}

Grid Items können anhand von Liniennummern, Liniennamen oder Spannen (span) positioniert werden[cite: 14]:

• grid-row-start / grid-row-end[cite: 14]
• grid-column-start / grid-column-end[cite: 14]

#one {
  /* Start / End */
  grid-row: 1 / 2;
  grid-column: 1 / span 3;
}

Wenn Elemente nicht explizit platziert werden, fließen sie automatisch in das Raster ein[cite: 14]:

• grid-auto-rows / grid-auto-columns: Legt die Größe automatisch generierter Spuren fest[cite: 14].
• grid-auto-flow: Steuert die Fließrichtung (row oder column)[cite: 14]. Das Schlüsselwort dense füllt Lücken im Raster auf, verändert jedoch evtl. die visuelle Reihenfolge[cite: 14].

Abstände werden zwischen den Spuren eingefügt, ohne zusätzliche Spuren zu erzeugen[cite: 14]:

• grid-row-gap / row-gap[cite: 14]
• grid-column-gap / column-gap[cite: 14]
• grid-gap: 20px 50px; (Zeile Spalte)[cite: 14]

Mögliche Werte: start, end, center, stretch, space-around, space-between, space-evenly[cite: 14].