Das CSS Grid Layout Modul bietet eine zweidimensionale Layoutmöglichkeit für Elemente innerhalb eines Containers. Dabei wird der Container in Zeilen und Spalten unterteilt. Die einzelnen Elemente werden dann innerhalb dieser Zeilen und Spalten positioniert. Welche Möglichkeiten Du noch mit dem CSS Grid hast, erfährst Du hier.

CSS Grid kurz erklärt

CSS Grid ist ein zweidimensionales Layoutmodell, das von W3C empfohlen wird und in den meisten modernen Webbrowsern unterstützt wird. Es ermöglicht die Trennung von Inhalten in Zeilen und Spalten, wodurch ein flexibles und reaktionsfähiges Layout erstellt werden kann. CSS Grid basiert auf einem 12-Spalten-Layout, wobei jede Spalte einen gleichen Anteil an der Breite des übergeordneten Elements einnimmt.

In der Regel wird ein responsives Layout erstellt, sodass sich die Anzahl der Spalten je nach Bildschirmbreite ändert. Grid-Items werden mit CSS-Klassen positioniert, die auf den gewünschten Spalten und Zeilen basieren. Dies ermöglicht es, Inhalte beliebig anzuordnen und so ein ansprechendes und intuitives Layout zu erstellen. CSS Grid ist ein mächtiges Werkzeug, um komplexe Layouts zu erstellen. Es ist jedoch wichtig zu beachten, dass es sich hierbei um ein fortgeschrittenes Layoutmodell handelt, das ein gewisses Maß an Übung und Erfahrung erfordert.

Dabei kommt es ohne JavaScript, Plugins, komplizierte Installationen oder zusätzliche Dateien aus. Das erhöht die Performance und bietet unzählige Gestaltungsmöglichkeiten auf allen Systemen.

Gestaltungsraster beim CSS Grid

Ein Gestaltungsraster (englisch grid) ist eine tabellarische Anordnung von Elementen auf einer Webseite. Die Anzahl der Spalten und Zeilen ist dabei variabel und kann dem Bedarf angepasst werden. Ein Gestaltungsraster erleichtert die Gestaltung einer Webseite, da es die Positionierung der einzelnen Elemente vorgibt. Ein Gestaltungsraster setzt sich aus einer Reihe von Spalten und Zeilen zusammen, die durch Linien voneinander getrennt sind.

Die Anzahl der Spalten und Zeilen ist dabei variabel und kann dem Bedarf angepasst werden. Ein Gestaltungsraster erleichtert die Gestaltung einer Webseite, da es die Positionierung der einzelnen Elemente vorgibt. Gestaltungsraster können entweder mithilfe von HTML-Tags oder mit CSS erstellt werden.

Die Verwendung von HTML-Tags ist dabei die einfachere Methode, allerdings ist die Gestaltungsmöglichkeiten damit eingeschränkt. CSS bietet dagegen viel mehr Flexibilität bei der Gestaltung eines Gestaltungsrasters.

Bei der Erstellung eines Gestaltungsrasters mithilfe von CSS sind zwei verschiedene Methoden möglich: die Verwendung von sogenannten Floats oder die Verwendung von sogenannten Grids. Floats sind eine Methode, um Elemente nebeneinander anzuordnen. Dabei wird das Element, das neben dem anderen Element angeordnet werden soll, mit dem CSS-Befehl „float: left“ oder „float: right“ formatiert. Durch diese Formatierung wird das Element aus dem normalen Fluss der Seite herausgelöst und kann neben dem anderen Element angeordnet werden.

Grids sind eine weitere Methode, um Elemente nebeneinander anzuordnen. Bei der Verwendung von Grids wird jedem Element eine bestimmte Spalte oder Zeile zugewiesen. Durch die Zuweisung der Spalten und Zeilen wird das Element an die entsprechende Stelle auf der Seite geplatzt. Die beiden Methoden können auch kombiniert werden, um ein Gestaltungsraster zu erstellen.

Ein Gestaltungsraster erleichtert die Gestaltung einer Webseite, da es die Positionierung der einzelnen Elemente vorgibt. Gestaltungsraster können entweder mithilfe von HTML-Tags oder mit CSS erstellt werden. Floats und Grids sind zwei verschiedene Methoden, um Elemente nebeneinander anzuordnen. Die beiden Methoden können auch kombiniert werden, um ein Gestaltungsraster zu erstellen.

Die Gestaltungsmöglichkeiten der Raster bei CSS sind unendlich. Du kannst fast alles umsetzen. Bei Grid by Example findest Du eine Übersicht über alle gängigen Formen, die mit CSS umzusetzen sind.

CSS Grundlagen

Erstellung eines CSS Grids

Zunächst musst du den Container in einem Grid darstellen, dies machst du mit display:grid. Mit dem Code grid-template-columns aktivierst du alle gewünschten Spalten. Hierbei kannst du dann die breiten und Höhen festlegen. Ein fertiges Raster könnte dann so aussehen:

.container{
display: grid;
grid-template-columns: 250px 250px 250px 250px 250px;
grid-template-rows: 150px;
}

Dabei hast Du nun 5 Spalten nebeneinander.

Rasterabstände

Rasterabstände fügst Du mit dem Text grid-row-gap und grid-column-gap oder für die gleichen Abstände mit grid-gap hinzu.

Automatische Verteilung an die vorhandene Bildschirmbreite mit Fractional Units

Einer der größten Vorteile des CSS Grids ist die responsiveness mit vielen unterschiedlichen Bildschirmen. Umgesetzt wird dies durch die sogenannten Fractional Unit (fr).

Die Bildschirmgröße wird hierbei in zum Beispiel 6 Teile aufgeteilt. Daraufhin werden den unterschiedlichen Spalten unterschiedlich viele Fractional Units zugeordnet. Im fertigen Code würde das so aussehen.

.container{
display: grid;
grid-template-columns: 1fr 3fr 2fr;
}

Für statische Spalten werden Pixel (px) verwendet. Pixel und Fractional Units können miteinander kombiniert werden. Dies könnte folgendermaßen aussehen:

.container{
display: grid;
grid-template-columns: 300px 3fr 2fr;
}

Dabei würde die erste Spalte mit 300px statisch bleiben und immer 300px an Breite einnehmen.

Absolute Freiheit auch im Grid

Nicht alleine das Grid kann beliebig angeordnet werden. Auch die Elemente innerhalb des Grids können unterschiedlich angeordnet sein. Hierbei werden Items verwendet. Dieses Item wird mithilfe eines Start- und Anfangspunktes im Grid angeordnet: grid-column: startpoint / endpoint;

.container{
  display: grid;
  grid-template-columns: 1fr 3fr 2fr;
}.item-1 {
 grid-column: 1 / 4;
}.item-5 {
 grid-column: 3 / 4;
}

Dies funktioniert adäquat dazu auch vertikal mit grid-row: startpoint/ endpoint;.

Anpassung an unterschiedliche Geräte

Mit CSS Grid kann je nach Bildschirmgröße mit Media Querias zwischen flexiblen und festen Elementen sowie die Aufteilungen und Platzierungen gewechselt werden. Dies wird folgendermaßen umgesetzt.

.
container{ display: grid;
 grid-template-columns: 250px 3fr 2fr;
}
.item-1 {
 grid-column: 1 / 4;
}
.item-2 {
 grid-row: 2 / 4;
}@media only screen and (max-width: 720px){
  .container{
   grid-template-columns: 1fr 1fr;
  } 
  .item-1 {
   grid-column: 1 / 3;
   grid-row: 2 / 3;
  } 
  .item-2 {
   grid-row: 1 / 1;
  }
}

Unterschied CSS Grid und Flexbox

Das Flexbox-Layoutmodell ist sehr beliebt, aber oft wird die Frage gestellt, ob CSS Grids besser ist. Flexbox eignet sich besser für lineare Strukturen, CSS Grids für komplexere verschachtelte Konstruktionen. Die Kombination beider Techniken ist sinnvoll und gewünscht. Es kommt auf den Anwendungsfall an, welches Layoutmodell sich besser eignet.

FAQ zu CSS Grid