Die Grid Funktionalität gibt es seit CSS 3. Sie ist ein modernes Werkzeug zum flexiblen Aufbau einzelner Komponenten in der HTML Seite oder zum Erstellen ganzer Webseiten-Layouts. Stellt euch Grid wie eine extrem flexible Tabelle mit Zeilen, Spalten und Zellen vor. Wobei die Bezeichnung Tabelle eine extreme Vereinfachung darstellt.
Dieser Beitrag erhebt keinen Anspruch auf Vollständigkeit. Er soll eine Einführung in CSS Grid darstellen und seine Vorteile aufzeigen. Und er soll dazu motivieren, tiefer in das Thema einzusteigen.
Ihr verwendet beim Grid keine speziellen HTML Tags wie bei einer Tabelle, sondern könnt ganz normale Container wie zum Beispiel ein #div# verwenden. Der umschließende Container erhält per CSS die Anweisung #display: grid#. Damit ist schon mal für den Browser klar was kommen wird innerhalb des Containers.
Man braucht auch keine expliziten Zeilen oder Spalten zu definieren. Unterhalb des Containers könnt ihr eure Zellen in Form von HTML-Tags definieren und der Rest regelt sich per CSS.
Mit den Eigenschaften grid-template-rows und grid-template-columns wird eine grundsätzliche Aufteilung festgelegt. Grundsätzlich heißt, dass einzelne Elemente im Nachgang noch bzgl. Ausdehnung und Positionierung verändert werden können.
In den beiden Eigenschaften werden Festlegungen für die Zeilen und Spalten in deren Reihenfolge getroffen. Hier könnt ihr z.B. der Kopfzeile und der ersten Spalte (oder jeder anderen Zeile oder Spalte) eine feste Größe (Zeilen: Höhe, Spalten: Breite) zuordnen, jedoch den restlichen Zeilen und Spalten mitteilen, dass sie den übriggeblieben Platz vollständig einnehmen sollen.
.grid-wrapper
{
grid-template-rows: 100px 1fr;
grid-template-colums: 100px 30% 40%;
}Hier wird festgelegt, dass die erste Reihe 100px hoch sein soll und die weiteren Reihen sich auf den restlichen Platz gleichmäßig verteilen sollen. Die Einheit fr steht für Fraction.
Nach der groben Einteilung können nun die Kindelemente genauer positioniert werden. Die spricht man einfach mit ihrem Selektor an und legt mit Hilfe der CSS Eigenschaften grid-row-start/grid-row-end, sowie grid-column-start/grid-column-end die Werte fest.
Nun wird auch klar, warum der Begriff „Tabelle“ zu kurz greift. Denn die Funktionsweise von CSS Grid entspricht eher einem Gitternetz in dem man sich bewegt. Denn die Ausdehnung und Positionierung, richtet sich nach den Linien im Gitternetz. Bei 5 Spalten gibt es also 6 Gitternetz-Linien. Mit der jeweiligen -start und -end Anweisung kann explizit festgelegt werden, an welcher Gitternetz-Linie die jeweilige Zeile oder Spalte anfangen und enden soll.
.grid-element-wide
{
grid-row-start: 2;
grid-row-end: 5;
grid-column-start: 3;
grid-column-end: 7;
}Der Beispiel-Code bedeutet also, dass sich das Element mit der Klasse grid-element-wide im Bereich von der 3. bis zur 7. Rasterlinie erstreckt und in der Höhe von der 2. bis zur 5. Rastelinie ausgedehnt. So lassen sich ganz einfach Bereiche in einem Webseiten Layout definieren, die aber bei verschienenen Bildschirmgrößen sehr dynamisch angepasst werden können.
Zum Beispiel lassen sich Zeilen und Spalten mit der Eigenschaft grid-auto-flow im Handumdrehen vertauschen. Hier wird z.B. einfach der Wert von grid-auto-flow: column in einer Media Query zu grid-auto-flow: row geändert und schon verändert sich die Anordnung.
Aber es ist noch viel mehr möglich mit CSS Grid. Zum Beispiel lassen sich den Gitternetz-Linien und den Zellen per CSS Namen zuordnen, mit denen man sie innerhalb von CSS ansprechen und konfigurieren kann. Das macht Code selbsterklärend und weniger kryptisch. Die Abstände zwischen den Zellen lassen sich natürlich definieren.
Sich wiederholende Zeilen- oder Spalten-Konstrukte lassen sich mit der repeat() Funktion übersichtlich darstellen und mit der Funktion minmax() lassen sich für die Werte Ober- und Untergrenzen festlegen.
Bei einem sauberen Programmierstil und einer selbsterklärenden Namensgebung, lassen sich auch komplexe Ansichten nachvollziehbar und für den Entwickler übersichtlich implementieren und so wartbar machen. Was z.B bei einer float-Lösung oder der Flexbox gerade auch im Bezug auf Flexibilität unübersichtlicher werden kann.
Legt euch doch selbst mal ein Gitter an und probiert es aus!