> ## Documentation Index
> Fetch the complete documentation index at: https://docs.baenninger.me/llms.txt
> Use this file to discover all available pages before exploring further.
# Grid
Das CSS-Grid-Layout ist ein zweidimensionales Layoutsystem für das Web. Es ermöglicht dir, Inhalte in Reihen und Spalten zu organisieren und bietet viele Features, um die Erstellung komplexer Layouts zu vereinfachen.
***
Zunächst müssen wir einen Grid-Container erstellen. Dafür nutzen wir die `display`-Eigenschaft.
```css theme={null}
.container {
display: grid;
}
```
## Reihen und Spalten definieren
Mit `grid-template-columns` bzw. `grid-template-rows` können wir Spalten und Reihen definieren.
```css theme={null}
.container {
grid-template-columns: ... ...;
/* e.g.
1fr 1fr
minmax(10px, 1fr) 3fr
repeat(5, 1fr)
50px auto 100px 1fr
*/
grid-template-rows: ... ...;
/* e.g.
min-content 1fr min-content
100px 1fr max-content
*/
}
```
Den Grid-Linien werden automatisch Zahlen zugewiesen.
***
Nun können wir mit `grid-column` bzw. `grid-row` den Start und Ende eines Grid-Items bestimmen.
```css theme={null}
.item {
grid-column: 3 / span 2;
grid-row: third-line / 4;
}
```
## Template-Areas
Mit Template-Areas können wir bestimmten Bereichen unseres Grids einen Namen geben.
```css theme={null}
.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: auto;
grid-template-areas:
"header header header header"
"main main . sidebar"
"footer footer footer footer";
}
```
***
Mit `grid-area` können wir nun festlegen, welche Items zu welcher Area gehören.
```css theme={null}
.item {
grid-area: header;
}
```
`grid-area` kann auch als Shorthand für `grid-row` und `grid-column` genutzt werden.
```css theme={null}
.item-d {
grid-area: 1 / span 2 / -1 / 6;
}
```
## Abstände
Mit `gap` können wir die Abstände zwischen den Reihen und den Spalten bestimmen.
```css theme={null}
.container {
gap: 1rem 2rem;
}
```
Wenn wir `column-gap` nicht spezifizieren, nutzt es den selben Wert wie `row-gap`.
## Ausrichtung
Mit `justify-items` kannst du Grid-Items anhand der Inline-Achse ausrichten.
```css theme={null}
.container {
justify-items: start | end | center | stretch;
}
```
***
Mit `align-items` kannst du Grid-Items anhand der Block-Achse ausrichten.
```css theme={null}
.container {
align-items: start | end | center | stretch;
}
```
***
`place-items` ist ein Shorthand für `align-items` und `justify-items`.
```css theme={null}
.center {
display: grid;
place-items: center / start;
}
```
***
Wenn die Grösse des Grids kleiner ist als der eigentliche Grid-Container können wir das Grid innerhalb des Containers ausrichten. Mit `justify-content` richten wir das Grid anhand der Inline-Achse aus.
```css theme={null}
.container {
justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
}
```
***
Mit `justify-content` richten wir das Grid anhand der Block-Achse aus.
```css theme={null}
.container {
align-content: start | end | center | stretch | space-around | space-between | space-evenly;
}
```
***
`place-content` ist ein Shorthand für `align-content` und `justify-content`.
```css theme={null}
.container {
display: grid;
place-content: center;
}
```
## Die `fr`-Einheit
Die `fr`-Einheit repräsentiert eine Fraktion des ürbigen Platzes.
```css theme={null}
.container {
grid-template-columns: 1fr 3fr;
}
```
Hier sagen wir, dass die erste Spalte ca. $\frac{1}{4}$ des Platzes und die zweite Spalte ca. $\frac{3}{4}$ des Platzes einnimmt.
Die `fr`-Einheit kann aber natürlich auch in Kombination mit anderen Einheiten genutzt werden.
```css theme={null}
.container {
grid-template-columns: 50px min-content 1fr;
}
```
## Sizing-Keywords
Die Mindestgrösse des Inhalts. Stelle dir eine Textzeile wie „E pluribus unum“ vor. Der Mindestinhalt entspricht wahrscheinlich der Breite des Wortes „pluribus“.
Die maximale Grösse des Inhalts. Stelle dir den [obigen Satz](/web/layout/grid#min-content) vor. Der maximale Inhalt ist die Länge des gesamten Satzes.
Dieses Schlüsselwort ist ähnlich wie die `fr`-Einheiten, mit dem Unterschied, dass sie bei der Zuteilung des verbleibenden Platzes den Kampf gegen die `fr`-Einheiten „verlieren“.
## Sizing Funktionen
Nutzt den verfügbaren Platz, jedoch nie weniger als `min-content` und nie mehr als `max-content`.
Legt einen Mindest- und einen Höchstwert für die Länge fest. Dies ist nützlich in Kombination mit relativen Einheiten. Zum Beispiel kannst du eine Spalte nur bis zu einer gewissen Breite schrumpfen lassen.
```css theme={null}
grid-template-columns: minmax(100px, 1fr) 3fr;
```
## Die `repeat()`-Funktion und Keywords
Die Funktion `repeat()` kann einige Tipparbeit ersparen:
```css theme={null}
grid-template-columns:
1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-columns:
repeat(8, 1fr);
```
Aber `repeat()` kann besonders ausgefallen werden, wenn es mit Schlüsselwörtern kombiniert wird:
* `auto-fill`: Passt so viele Spalten wie möglich in eine Zeile ein, auch wenn sie leer sind.
* `auto-fit`: Passt alle vorhandenen Spalten in den Platz ein. Bevorzuge expandierende Spalten, um den Platz zu füllen, anstatt leere Spalten.
```css theme={null}
grid-template-columns:
repeat(auto-fit, minmax(250px, 1fr));
```
Mehr Informationen findest du in [diesem Post](https://css-tricks.com/auto-sizing-columns-css-grid-auto-fill-vs-auto-fit/).