0t1 steckt noch in den Kinderschuhen.

CSS Grid

In diesem Tutorial werden die grundlegenden Bausteine des CSS-Grid und dessen Zusammensetzung aufgezählt. Von einfachen bis hin zu verschieden großen Grid-Containern und deren möglichen Ausrichtungen.

Was ist CSS-Grid?

Das CSS Grid-Layout ist ein zweidimensionales Raster von gedachten Linien für das Layout von Webseiten in Zeilen und Spalten. Die Elemente innerhalb des Grids werden anhand eines Tabellen-ähnlichen Rasters ausgerichtet und verteilt.

Unterschiede zwischen Flexbox und CSS-Grid

  1. Dimensionalität und Flexibilität

    Flexboxen sind eine eindimensionale Gestaltung von Containern. Spalten und Zeilen können mithilfe von Flexboxen erstellt werden, jedoch nicht koexistieren.  

    CSS-Grid gibt uns, im Gegensatz zur Flexbox, die Freiheit, Spalten und Zeilen gleichzeitig im selben Container zu erstellen und diese in Breite und Länge beliebig auszurichten. 

  2. Einzelne Container vs. überlappende Container 

    Flexbox ist nicht dafür gedacht, das ganze Layout einer Webseite zu gestalten, sondern lediglich einzelne Container zu bearbeiten. Besonders hilfreich ist ein Flexbox-Design, wenn es sich um eine reine inhaltliche Informationsausgabe handelt, bei der sich die Container nicht überlappen müssen. Aus diesem Grund wird bei Flexboxen von einem »Inhalt-First« Design gesprochen, da der Informationsfluss im Vordergrund steht. 

Das CSS-Grid erlaubt einem, das äußere Layout einer Seite zu gestalten, Zeilen oder Spalten zu überlappen und ihnen verschiedene Größen oder Breiten zu verleihen. Dies ist ausgesprochen nützlich, wenn das Design einer Webseite in eine komplexere Ebene übergeht. Aus diesem Grund wird bei einem CSS-Grid auch von einem »Layout First« Design gesprochen, da der äußerliche Ausbau im Vordergrund steht. 

Es ist nicht zwingend erforderlich, sich für eines der beiden zu entscheiden, jedoch ist zu beachten, dass ein Flexbox-Container problemlos in einem CSS-Grid angewendet werden kann, wohingegen dieses Verfahren umgekehrt nicht funktioniert.  


Grid Container

Um einen Grid-Container zu erstellen, setzt du die Eigenschaft display auf den Wert grid oder inline-grid. Alle direkten Kinder von Grid-Containern werden dann zu Grid-Elementen.

display: grid erzeugt ein Block-Level Grid

display: inline-grid erzeugt ein Inline-Level Grid


Explicit Grid

Lege ein Raster explizit fest, indem du Spalten und Zeilen mit grid-template-columns und grid-template-rows erstellst.

grid-template-rows: wert wert wert

Für jeden Wert, der für grid-template-rows angegeben ist, werden Zeilenspuren erstellt. Spurgrößenwerte können alle nicht negativen Längenwerte sein (px, %, em usw.)

grid-template-rows: 33px 33% 1fr;

grid-template-columns: wert wert wert

Wie bei Zeilen wird eine Spaltenspur für jeden Wert erstellt, der für grid-template-columns angegeben ist, der Abstand dieser wird durch die angegebenen Werte definiert.

grid-template-columns: 25px 25% 25px 25%;

grid-template: <grid-template-rows> / <grid-template-columns>

Grid-template ist eine abgekürzte Eigenschaft, die grid-template-rows und grid-template-columns kombiniert.

grid-template: 33px 33% 1fr / 25px 25% 25px 25%;

Fractions fr

Die fr-Einheit hilft beim Erstellen flexibler Rasterspuren. Es stellt einen Bruchteil des verfügbaren Platzes im Grid-Container dar. Fraction wird basierend auf dem verbleibenden Platz berechnet, wenn er mit anderen Längenwerten kombiniert wird.

CSS Grid Templates
CSS-Grid-Templates

minmax ( ) Funktion

Die Funktion minmax() akzeptiert 2 Parameter: Der Erste ist die minimale Größe der Rasterspuren und der Zweite die maximale Größe. Der Min-Wert darf nicht größer, als der Max-Wert sein, da der Browser diesen sonst ignoriert. Neben Längenwerten können die Werte auch Auto (»automatisch«) sein, wodurch die Rasterspuren basierend auf der Größe des Inhalts wachsen/sich dehnen können. Wenn man Auto benutzt, ist eine Flexibilität vorhanden, es kann jedoch nicht kontrolliert werden, wo das Grid umbricht. Wenn man Bilder mit »auto« anpassen möchte, ist Vorsicht geboten, denn es kann nicht kontrollieren werden, wie das Bild angezeigt wird (Browser abhängig). Mit dieser Anweisung wird das Grid sehr flexibel und responsiv. Allerdings sollten keine Festwerte wie Pixel benutzt werden (Verlust der Responsivität).

grid-template-rows: minmax(mininmale Größe, maximale Größe);

grid-template-columns: minmax(mininmale Größe, maximale Größe);


repeat ( ) Funktion

Definiere die sich wiederholende Rasterspure mit der repeat()-Notation. Diese ist nützlich für Raster mit Elementen von gleicher Größe oder vielen Elementen.

Die repeat()-Funktion akzeptiert 2 Parameter: der Erste stellt die Anzahl der Wiederholungen der definierten Zellen dar, und der Zweite ist die Zellengröße.

grid-template-columns: repeat(Anzahl, Zellengröße);

Die repeat()-Funktion kann auch innerhalb weiterer Größenangaben gesetzt werden.

grid-template-columns: repeat(3, 1fr);
grid-template-rows: 20px repeat(3, 1fr);
CSS Repeat Funktion
CSS-Repeat-Funktion

Zwischenräume

Die Eigenschaften grid-column-gap und grid-row-gap erzeugen Lücken zwischen Spalten und Zeilen. Rasterlücken entstehen nur zwischen Spalten und Zeilen und nicht am Rand des Rastercontainers.

Größenwerte von Lücken können beliebig viele nicht-negative Längenwerte (px, %, em, etc.) haben.

grid-row-gap: wert;

grid-column-gap: wert;

grid-gap ist die Abkürzung für grid-row-gap und grid-column-gap.

Wenn zwei Werte angegeben werden, stellt der erste Wert grid-row-gap und der zweite grid-column-gap dar. Gibt man nur einen Wert an, so gilt dieser für die Spalten und Zeilen gleichzeitig.

grid-gap: wert wert;

grid-gap: 5px;
grid-gap Eigenschaft
grid-gap-Eigenschaft

Positionieren von Elementen nach Rasterliniennummern

Rasterlinien sind Linien, die den Anfang, das Ende, und dazwischenstehende Rasterlininen darstellen.

Die Rasterlinien werden von 1 auf hochgezählt. Hierbei ist die erste Spaltenlinie links und wird nach rechts hochgezählt. Bei Zeilen wird von links nach rechts hochgezählt.

grid-row-start: Startzeile; grid-row-end: Endzeile;

grid-column-start: Startspalte ; grid-column-end: Endspalte;

Wenn sich ein Element nur über eine Zeile oder Spalte erstreckt, ist »grid-row/column-end« nicht erforderlich.

grid-row fasst die Elemente grid-row-start und grid-row-end zu einem zusammen.

grid-row: <grid-row-start> / <grid-row-end>;

grid-column fasst die Elemente grid-column-start und grid-column-end zu einem zusammen.

Wird nur ein Wert eingegeben, so stellt dieser nur grid-row/grid-column-start dar. Wenn zwei Werte angegeben werden, entspricht der erste Wert grid-row/column-start und der zweite grid-row/column-end und muss durch einen Schrägstrich / getrennt werden.

grid-column: <grid-column-start> / <grid-column-end>;

grid-area fasst alle vorher genannten Elemente zusammen.

grid-area: <grid-row-start> / <grid-column-start> / <grid-row-end> / <grid-column-end>

Rasterliniennummerierung
Rasterliniennummerierung

Verteilen von Elementen über Zeilen und Spalten

Rasterelemente erstrecken sich standardmäßig nur über eine Spalten- und Zeilenspur, es können jedoch mehrere Zeilen- und/oder Spaltenspuren mit denselben Eigenschaften zum Positionieren umfasst werden.

Um ein Rasterelement über mehr als eine Spalte zu strecken, muss grid-column-end auf eine Spaltenzeilennummer festgelegt sein, die größer ist als der Startwert von grid-column-start.

grid-row-start: Startwert;

grid-row-end: Endwert>Startwert;

Dasselbe gilt für grid-column-start und grid-column-end.

grid-column-start: Startwert;

grid-column-end: Endwert > Startwert;

grid-row / grid-column fasst die Elemente grid-row-start und grid-row-end zu einem zusammen.

grid-column: <grid-column-start> / <grid-column-end>;

grid-area fasst alle vorher genannten Elemente zusammen.

grid-area: <grid-row-start> / <grid-column-start> / <grid-row-end> / <grid-column-end>

Das Schlüsselwort span, gefolgt von der Spalten- oder Zeilennummer, über der sich das Element erstrecken soll, kann ebenfalls verwendet werden.

grid-area: 2 / 2 / span 2 / span 2;
Verteilen von Elementen im Raster
Verteilen von Elementen im Raster

Spalten und Zeilen benennen

Rasterlinien können beim Definieren des Rasters mit den Eigenschaften wie grid-template-rows und grid-template-columns benannt werden. Der Liniennamen dient dann als Referenz, um Elemente zu positionieren.

Vermeide bei der Benennung Schlüsselwörte wie z. B. »span« oder »fr«., um Verwirrung zu vermeiden.

Zugewiesene Liniennamen müssen in eckige Klammern [name-of-line] gesetzt und relativ zu den Rasterspuren platziert werden.

grid-template-rows: [name1] Größe [name2] Größe [name_x]; grid-template-columns: [name1] Größe [name2] Größe [name_x];

Jeder Linienname kann dann aufgerufen werden, wenn die Grid-Items positioniert werden.

grid-template-rows: [Z1] 1fr [Z2] 1fr [Z3] 2fr [Z4];
grid-template-columns: [S1] 1fr [S2] 1fr [S3] 1fr [S4];
Bennenung von Rasterlinien
Benennung von Rasterlinien

Positionieren von Elementen mit Liniennamen

Mit benannten Rasterlinien können Elemente nach Liniennamen und Nummern positioniert werden.

Wenn Liniennamen referenziert werden, dürfen diese nicht in eckige Klammern gesetzt werden.

grid-row: Z1 / Z3;
grid-column: S2 / S4;
Positionierung von Items
Bennenung von Rasterlinien

Benennen und Positionieren von Elementen nach Rasterbereichen

So wie Rasterlinien einzeln benannt werden können, so können auch ganze Bereiche benannt werden, indem man grid-template-areas verwendet.

Namensgruppen sollten in Anführungszeichen eingeschlossen werden und jeder Name sollte durch ein Leerzeichen getrennt werden.

Namensgruppen in Anführungszeichen stehen für eine Zeile. Jeder Name innerhalb der Anführungszeichen steht für eine Spalte.

grid-template-rows: 1fr 2fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
grid-template-areas: "header header header"
                      "sidebar content content"
                      "footer footer footer";
Benennung von Grid-Areas
Benennung von Grid-Areas

Rasterbereichsnamen können auch von grid-row-start, grid-row-end, grid-column-start und grid-column-end festgelegt werden.

Die kurzen Schreibweisen von grid-row und grid-column können auch auf Rasterbereichsnamen verweisen, sowie grid-area.

grid-column-start: header;
grid-column-end: header;
grid-row-start: header;
grid-row-end: header;

grid-row: sidebar;
grid-column: sidebar;

grid-area: content;
grid-area: footer;
Positionierung von Grid Items in Grid Areas
Positionierung von Grid-Items in Grid-Areas

Ausrichten von Rasterspuren

Gitterspuren können relativ zum Gittercontainer entlang der Zeilen- und Spaltenachsen ausgerichtet werden.

align-content richtet Spuren entlang der Zeilenachse und justify-content entlang der Spaltenachse aus. Dies sind die wichtigsten Ausrichtungen:

  • start Spalten/Zeilen werden am Start der Zeilennachse/Spaltenachse ausgerichtet

  • end Spalten/Zeilen werden am Ende der Zeilennachse/Spaltenachse ausgerichtet

  • center Spalten/Zeilen werden in der Mitte der Zeilennachse/Spaltenachse ausgerichtet

.grid {
  width: 100px;
  height: 100px;
  grid-template-columns: repeat(2, 15px);
  grid-template-rows: repeat(2, 15px);
  grid-gap: 2px;
  justify-content: center;
}
Zentrierte Ausrichtung
Zentrierte Ausrichtung

Fazit


CSS-Grids sind besonders hilfreich, wenn eine responsive Webseite mit überlappenden, großen Elementen gestaltet werden soll. Durch 2-Dimensionalität des Grids, lassen sich Elemente interessanter und flexibler platzieren. Der wichtigste Schritt, wenn man ein CSS-Grid erstellen möchte, ist die klare Deklaration von »display: grid« oder »display: inline-grid« in CSS, um das Grid darzustellen.

Code sparen ist dabei sehr wichtig, um die Übersichtlichkeit beizubehalten. Das heißt, die Nutzung von Kürzeln, wie zum Beispiel »repeat«, um gleichwertige Attribute zusammenzufassen, um für eine überschauliche Semantik zu sorgen.

Anbei hilfreiche Links:

https://grid.layoutit.com/ (Grid-Code mit anschaubarem Beispiel erstellen lassen)

https://kulturbanause.de/blog/css-grid-auto-fill-responsive-layouts-ohne-media-queries/ (Auto-Fill ohne Media-Queries)


© 0t1

Cookies

0t1 mag keine Kekse (und kein Tracking). Wir verwenden lediglich notwendige Cookies für essentielle Funktionen.

Wir verwenden Schriftarten von Adobe Fonts. Dafür stellt dein Browser eine Verbindung zu den Servern von Adobe in den USA her. Wenn du unsere Seite nutzen möchtest, musst du dich damit einverstanden erklären.

Weitere Informationen in unserer Datenschutzerklärung.