====== CSS Grid Layout ======

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

===== 1. Funktionsweise & Terminologie =====

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

==== Grundbegriffe ====
  * **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].

===== 2. Container definieren & Spuren festlegen =====

<code css>
#layout {
  display: grid;
  grid-template-rows: 100px 400px 100px;
  grid-template-columns: 200px 1fr 200px;
}
</code>

==== Spurgrößenwerte ====
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].

==== Liniennummern & Liniennamen ====
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]:

<code css>
#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;
}
</code>

===== 3. Rasterbereiche (Grid Areas) =====

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

<code css>
#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; }
</code>

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

===== 4. Kurzschreibweise (grid) =====

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

<code css>
#layout {
  display: grid;
  grid: 100px 400px 100px / 200px 1fr 200px;
}
</code>

===== 5. Elemente platzieren =====

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

==== Einzelne Eigenschaften ====
  * ''grid-row-start'' / ''grid-row-end''[cite: 14]
  * ''grid-column-start'' / ''grid-column-end''[cite: 14]

==== Kurzschreibweisen ====
<code css>
#one {
  /* Start / End */
  grid-row: 1 / 2;
  grid-column: 1 / span 3;
}
</code>

===== 6. Implizites Grid & Automatischer Fluss =====

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

===== 7. Abstände & Ausrichtung =====

==== Abstände (Gaps) ====
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]

==== Ausrichtung im Container & Element ====

^ Eigenschaft ^ Ebene ^ Achse / Ausrichtung ^
| **justify-items** | Container | Horizontale Ausrichtung aller Elemente in ihren Zellen[cite: 14] |
| **align-items** | Container | Vertikale Ausrichtung aller Elemente in ihren Zellen[cite: 14] |
| **justify-self** | Item | Horizontale Ausrichtung eines einzelnen Elements[cite: 14] |
| **align-self** | Item | Vertikale Ausrichtung eines einzelnen Elements[cite: 14] |
| **justify-content** | Container | Horizontale Verteilung der gesamten Spuren im Container[cite: 14] |
| **align-content** | Container | Vertikale Verteilung der gesamten Spuren im Container[cite: 14] |

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

===== 8. Übersicht aller Grid-Eigenschaften =====

^ Container-Eigenschaften ^ Item-Eigenschaften ^
| ''display: grid \| inline-grid''[cite: 14] | ''grid-column'' (''-start'' / ''-end'')[cite: 14] |
| ''grid'' / ''grid-template''[cite: 14] | ''grid-row'' (''-start'' / ''-end'')[cite: 14] |
| ''grid-template-rows'' / ''-columns'' / ''-areas''[cite: 14] | ''grid-area''[cite: 14] |
| ''grid-auto-rows'' / ''-columns'' / ''-flow''[cite: 14] | ''justify-self'' / ''align-self''[cite: 14] |
| ''grid-gap'' (''grid-row-gap'', ''grid-column-gap'')[cite: 14] | ''order'' *(nicht Teil des Grid-Moduls)*[cite: 14] |
| ''justify-items'' / ''align-items''[cite: 14] | ''z-index'' *(nicht Teil des Grid-Moduls)*[cite: 14] |
| ''justify-content'' / ''align-content''[cite: 14] | |