CSS Grid: So setzen Sie komplexe Weblayouts erfolgreich um

Der Mensch orientiert sich vor allem visuell. Wir vertrauen dem, was wir sehen, mehr als dem, das wir über einen anderen Sinn wahrnehmen. Das hat nicht zuletzt Einfluss auf die Webseitengestaltung. Es kommt nicht nur auf die Art der präsentierten Inhalte an, sondern auch auf die Weise, in der sie präsentiert werden – das Layout. CSS Grid macht es möglich, komplexe Weblayouts erfolgreich umzusetzen und einzelne Elemente gezielt in einem Raster zu platzieren.

Was ist CSS Grid?

CSS Grid ist ein System zur freien Positionierung von Items auf einer Website. Hierfür wird ein Raster erstellt, in dem alle Objekte eine konkrete Anfangs- und Endkoordinate erhalten. Dank CSS Grid müssen sich Webdesigner bzw. Webdesignerinnen nicht an starre Gestaltungsregeln halten, sondern können komplexe Weblayouts ohne großen Aufwand erstellen.

CSS Grid vs. Flexbox: Das macht CSS Grid so besonders

CSS Grid ist eine Lösung, die sich für komplexe, verschachtelte Webdesigns anbietet. Wer gerne individuelle Layouts nutzen und sich von anderen Webseiten abheben möchte, liegt mit diesem System richtig. Ebenso ist es möglich, inhaltsleere Boxen zu verwenden und auf CSS Unit zurückzugreifen. Das bietet eine große Flexibilität bei der Gestaltung.

Flexbox ist ein System, das vor allem bei linearen Strukturen geeignet ist. Es ermöglicht einen schnellen, einfachen und intuitiven Aufbau. Dieser sollte auch bei komplexen Webdesigns keineswegs vernachlässigt werden.

Am besten ist es jedoch, CSS Grid und Flexbox miteinander zu kombinieren und von den Vorteilen beider Systeme zu profitieren.

Wie funktioniert CSS Grid?

Mit CSS Grid erstellen Sie zunächst mithilfe eines Elternelements ein Raster. Im Anschluss platzieren Sie in Ihrem Raster mehrere Kindelemente. Damit das Elternelement die Information erhält, dass Sie mit CSS Grid arbeiten, nutzen Sie den Befehl display:grid.

Die im Container hinterlegten Eigenschaften werden an alle Items weitergegeben. Dann definieren Sie einzelne Zeilen und Spalte. Für die Zeilen kommt der Befehl grid-template-columns zum Einsatz. Für das Setzen der Spalten verwenden Sie grid-template-rows. Schon haben Sie mit CSS Grid Ihr eigenes Raster kreiiert!

Folgender Befehl zeigt die Erstellung eines CSS Grid, das aus drei Zeilen und fünf Spalten besteht:

.container {

display: grid;

grid-template-rows:200px 1fr 100px;

grid-template-columns:20% 20% 20% 20% 20%;

}

Im Beispiel sehen Sie ein CSS Grid, das aus drei Zeilen und fünf Spalten besteht. Die Pixelanzahl der ersten Zeile beträgt 200 Pixel, die Pixelanzahl der zweiten Zeile 100 Pixel. Doch was bedeutet die Angabe 1fr (1 Fraction) in dem Befehl für die mittlere Zeile? Diese gibt an, dass sich die Zeile über den restlichen bestehenden Platz erstreckt, der im Container noch zur Verfügung steht.

In dieses Raster können Sie im Anschluss CSS-Grid-Layouts einfügen. Um diese zu bilden, werden den einzelnen Zellen Gestaltungselemente (auch Kindelemente genannt) im Raster zugewiesen. Die konkrete Positionierung erfolgt über die Rasterlinien und nicht über die Rasterspalten.

CSS-Grid-Tutorial: Diese Begriffe und Anweisungen sollten Sie kennen

Mit CSS Grid können ganz unterschiedliche Inhalte erzeugt werden. Die wichtigsten Schlüsselbegriffe hierfür lernen Sie im Folgenden kennen:

1. css grid column

Hierüber können Sie Spalten innerhalb des Grids definieren.

2. css grid row

Dieser Schlüsselbegriff dient zur Erstellung von Zeilen in einem Raster.

3. css grid container

Hierüber wird das Elternelement erstellt, in dem sich das Raster dann befindet.

4. fractions

Über „fr = fractions“ können Abstände zwischen Spalten definiert werden, sodass diese exakt gleich groß sind.

Grundlegende Anweisungen zur Positionierung

1. css grid gap, column gap

Über diese Befehle ist es möglich, die Abstände innerhalb des Grids beziehungsweise zwischen den Spalten zu bestimmen.

Beispiel:

.container{

display: grid;

grid-template-columns: repeat(5, 150px);

grid-template-rows: 100px;

grid-gap: 20px;

}

2. grid-template-rows

Über diesen Schlüsselbegriff werden Anzahl und Höhe von Zeilen in einem Grid bestimmt.

3. grid-template-columns

Die grundlegenden Eigenschaften von Spalten werden über diesen Wert bestimmt.

Beispiel:

.container {

height:150vh;

display: grid;

grid-template-rows: [line-h-1] 100px [line-h-2] 1fr [line-h-3] 50px [line-h-4];

grid-template-columns: [line-v-1] 25% [line-v-2] 25% [line-v-3] 25% [line-v-4] 25% [line-v-5];

}

4. grid-item1, grid-item2, …

Die Zeilen und Spalten eines Grids werden aufsteigend nummeriert, beginnend bei 1. Wenn es also fünf Spalten und 6 Zeilen gibt, kann einem Item mittels Spalte 3, Zeile 5 eine klare Position zugewiesen werden.

5. grid-column: x oder grid-column-start: x

Über diesen Schlüsselbegriff können Sie die Aufteilung von Elementen auf Spalten bestimmen.

Beispiel:

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

.item-1 {
grid-column: 1 / 4;
}
.item-5 {
grid-column: 3 / 4;
}

6. grid-row: x oder grid-row-start: x

Hierüber lässt sich festlegen, wie die einzelnen Elemente in den Zeilen platziert werden.

Beispiel:

header {

grid-column:1 / 5;

grid-row:1 / 2;

}

Das responsive CSS Grid: Diese Funktionen bietet es

Sowohl HTML als auch CSS spielen im modernen Webdesign eine wichtige Rolle. Bei HTML werden Inhalten nur grundlegende Koordinaten zugewiesen. CSS ermöglicht hingegen eine konkrete Positionierung und somit komplexe Webdesigns.

CSS steht für Cascading Style Sheets und ist eine der großen Kernsprachen des Internets. Zusammen mit HTML und Javascript bildet CSS eines der wichtigsten Tools für die Websitegestaltung. CSS arbeitet mit sogenannten Gestaltungsanweisungen, die es möglich machen, selbst komplexe Inhalte darzustellen. Die Raster sind hierbei äußerst flexibel.

Zudem sind viele automatische Anpassungen möglich. Das spielt gerade im mobilen Internet eine wichtige Rolle. Die Inhalte müssen auf unterschiedliche Endgeräten und Displays ausgerichtet werden.

Das responsive Design von CSS Grid bietet verschiedene Möglichkeiten

1. minmax()

Mit dieser Funktion ist es möglich, Mindest- und Maximalbreiten von Rasterzellen zu bestimmen. Hierbei steht „min-content“ für eine Mindestbreite und „max-content“ für eine Maximalbreite.

2. auto-fit

Mit dem Schlüsselwort „auto-fit“ können Sie festlegen, dass sich die Anzahl an Elementen in Zeilen des Grids an den vorhandenen Platz anpassen.

3. auto-fill

Dieses Schlüsselwort ist mit „auto-fit“ verwandt, arbeitet aber etwas anders. Hier passen sich die Elemente nicht an den vorhandenen Platz an, sondern das Grid erstellt bei Bedarf weitere Elemente.

4. repeat()

Mit CSS Grid Repeat können Inhalte wiederholt werden. In die Klammer wird zunächst die Anzahl an Wiederholungen und anschließend die Grid-Eigenschaft eingetragen.

5. grid-gap

Mit CSS Grid Gap wird definiert, wie groß die Abstände zwischen den Zeilen und Spalten eines Rasters sein sollen.

Fazit: Mit CSS Grid flexible Weblayouts erstellen

CSS Grid ist für die Gestaltung von Webseiten eine große Hilfe. Das gilt insbesondere dann, wenn man außergewöhnliche, nichtlineare Layouts umsetzen möchte. Für Webdesigner und Webdesignerinnen ist es wichtig, die grundlegenden CSS-Grid-Begriffe zu kennen, um Raster erstellen und mit Leben füllen zu können. Hierbei sind sie in der Gestaltung der Grids und der Platzierung der einzelnen Elemente ausgesprochen frei.

Titelbild: Maskot / iStock / Getty Images Plus