CSS Grid Tutorial – Teil 1: Basics

CSS Grid Tutorial – Teil 1: Basics

Tutorial CSS Grid – Teil 1

Der erste Teil dieses visuellen Tutorials deckt die Grundlagen von CSS Grid ab. Die Lektion beschränkt sich auf die absolut notwendigen und minimalen Befehle.

Inhalt

Was ist CSS Grid?

Es handelt sich um eine Spezifikation des W3 Konsortiums, welche das Layouten mit Spalten und Zeilen im Browser regelt. Seit Oktober 2017 unterstützen alle Browser die Spezifikation. Diese wird überarbeitet, ein Teil der Befehle wird in Zukunft in das neue Box Alignment Module Level 3 verlagert.

Frage 1: wo wird CSS Grid definiert?

CSS Grid wird im Elternelement (im Grid Container) der zu layoutenden Tags definiert. Im untenstehenden Beispiel erfolgt die Definition im section Tag. Das heisst, die article Tags lassen sich spalten- und zeilenweise layouten. Der Befehl wird nicht in die darunterliegenden Tags vererbt.

Struktur CSS Grid

CSS Grid wird mit Hilfe der display Eigenschaft festgelegt:

Festlegung CSS Grid

Im Beispiel füllt die section 75% der Bildschirmbreite (Viewport width oder vw) und ist mit einem grauen Hintergrund versehen.

Frage 2: wie wird das Spalten- und Zeilenraster definiert?

Es gibt eine Menge von Möglichkeiten, das Raster festzulegen:

  • Grundsätzlich lässt sich von jeder Spalte, resp. jeder Zeile die Breite, resp. Höhe in absoluten (zum Beispiel px) oder relativen (z.B. %, vw, vh, fr etc.) Einheiten definieren, siehe Beispiel.
  • Es besteht auch die Möglichkeit, die Breiten mehrerer Spalten, resp. Zeilen zusammen festzulegen (siehe Tutorial 2).
  • Als letzte Option kann die Höhe beliebiger Zeilen, resp. Spalten festgelegt werden. Dies wird dann gebraucht, wenn die Inhalte aus einer Datenbank kommen und die Anzahl der Zeilen nicht bekannt ist (siehe Tutorial 3).

Frage 3: wie werden Breite, resp. Höhe jeder Spalte, resp. jeder Zeile festgelegt?

Im folgenden Beispiel wird die Breite dreier Spalten und die Höhe zweier Zeilen festgelegt:

Spalten und Zeilen in CSS Grid

Im Beispiel hat die erste Spalte eine Breite von einer Einheit (1fr), die zweite Spalte ist zwei Einheiten breit (2fr) und die dritte Spalte wieder eine Einheit breit (1fr). Der zur Verfügung stehende Platz beträgt 75% des Browserfensters (75vw), dieser wird auf die drei Spalten verteilt. Mit CSS Grid braucht es keine Breiten (width) und Aussenabstände (margin) mehr. Die Innenabstände (padding) können weiterhin verwendet werden.

Frage 4: was bedeutet fr?

fr bedeutet die Breite des zur Verfügung stehenden Platzes, also in Abhängigkeit des Browser-Fensters. Im Beispiel von Frage 3 ist die mittlere Spalte doppelt so breit wie die erste, resp. dritte Spalte. Der Browser kümmerst sich automatisch um die Breiten der Spalten, die Spaltenabstände und Innenabstände.

Frage 5: wie werden die Spalten- und Zeilenabstände festgelegt?

Im Moment sind laut Spezifikation die Abstände zwischen allen Spalten, resp. Zeilen alle gleich:

Spalten. und Zeilenabstände in CSS Grid

Der Abstand zwischen allen Spalten beträgt 10px, der Abstand zwischen allen Zeilen auch 10px.

Frage 6: wie lassen sich Spalten und Zeilen vertauschen?

Normalerweise füllt CSS Grid den Inhalt zuerst zeilenweise. Mit dem Befehl grid-auto-flow: column lässt sich dies ändern. Mit diesem Befehl wird spaltenweise gefüllt.

Zeilen und Spalten vertauschen in CSS Grid

Frage 7: wie sieht das fertige Layout aus?

Aus didaktischen Gründen wurde dem article Tag (den Grid Elementen) eine Hintergrundfarbe und ein innerer Rand (padding) von 5px zugewiesen:

Child Elemente in CSS Grid

Darstellung im Browser:

Layouten mit CSS Grid

Zusammenfassung

Mit nur wenigen Befehlen lassen sich mit Hilfe von CSS Grid zeilen- und spaltenweise aufgebaute Layouts erstellen.

  • Grid Container: das übergeordnete Element, in welchem die CSS Grid Befehle verwendet werden. Im Beispiel handelt es sich um den section Tag.
  • Grid Elemente: Elemente, welche zeilen- und spaltenweise angeordnet werden. Die Befehle von CSS Grid werden nicht auf untergeordnete Elemente vererbt. Im Beispiel handelt es sich um die article tags.
  • Grid Zelle: Ein einzelner Tag der Grid Elemente. Mit Hilfe von Klassen oder anderen Selektoren können einzelne Tags individuell formatiert werden. Im Beispiel handelt es sich um einen article tag

Fortsetzung

Teil 2 des Tutorials