Was ist CSS Grid?

CSS Grid Layout (oder einfach CSS Grid) ist ein zweidimensionales Layout-System in CSS. Es ermöglicht die Steuerung der Anordnung von Elementen sowohl in Zeilen (horizontal) als auch in Spalten (vertikal), wodurch komplexe Rasterstrukturen für die Erstellung von Benutzeroberflächen entstehen.

Die wichtigsten Konzepte von CSS Grid umfassen:

Grid-Container: Element, auf das die Eigenschaft display: grid oder display: inline-grid angewendet wird. Nachkommen dieses Elements werden zu Grid-Items.
Grid-Items: Direkte Nachkommen des Grid-Containers.
Grid-Linien: Trennlinien, die das Raster bilden. Sie können benannt oder numerisch indiziert sein.
Grid-Spuren: Der Raum zwischen zwei Linien im Raster — es ist entweder eine Spalte oder eine Zeile.
Grid-Zellen: Die kleinste Einheit des Rasters, gebildet durch die Schnittmenge einer Zeile und einer Spalte.
Grid-Bereiche: Ein rechteckiger Bereich des Rasters, der eine oder mehrere Zellen einnimmt.

Wichtige Eigenschaften für die Arbeit mit CSS Grid umfassen:

Für den Container:

display: grid | inline-grid;
grid-template-columns: Legt die Spalten des Rasters fest.
grid-template-rows: Legt die Zeilen des Rasters fest.
grid-template-areas: Legt benannte Bereiche des Rasters fest.
gap | row-gap | column-gap: Legt die Abstände zwischen den Zellen fest.
justify-items | align-items | place-items: Ausrichtung des Inhalts innerhalb der Zellen entlang der Haupt- und Querschnittsachsen.
justify-content | align-content | place-content: Ausrichtung der Rasterlinien innerhalb des Containers.

Für die Elemente (Grid-Items):

grid-column-start | grid-column-end | grid-column: Bestimmt, welche Linien der Spalten das Element einnimmt.
grid-row-start | grid-row-end | grid-row: Bestimmt, welche Linien der Zeilen das Element einnimmt.
grid-area: Weist dem Element einen benannten Bereich des Rasters zu oder legt seine Position mit Linien fest.
justify-self | align-self | place-self: Ausrichtung des Elements innerhalb seiner Zelle.

CSS Grid bietet leistungsstarke Werkzeuge zur Erstellung von adaptiven und komplexen Layouts, was die Aufgaben erheblich vereinfacht, die zuvor die Verwendung von float, inline-block oder absoluter Positionierung erforderten.

.container {
  display: grid; /* Das Element wird zu einem Grid-Container */
  grid-template-columns: 1fr 1fr 1fr; /* Erstellen von 3 gleich breiten Spalten */
  grid-template-rows: auto auto; /* Erstellen von 2 Zeilen mit automatischer Höhe */
  gap: 10px; /* Hinzufügen von Abständen zwischen den Zellen */
}

.item {
  /* Elemente innerhalb des Containers werden automatisch zu Grid-Items */
  background-color: lightblue;
  padding: 20px;
  text-align: center;
}

.item:nth-child(1) {
  grid-column: 1 / 3; /* Das erste Element nimmt die Spalten 1 bis 3 ein */
}