Einstieg in CSS Grid Layouts

CSS Grid Layouts sind mit Sicherheit eine der spannendsten Entwicklung in CSS seit Jahren. Es ist im Endeffekt das, wovon alle Webdesigner und Frontend-Entwickler schon immer geträumt haben.

Endlich können wir unsere Webseiten direkt in CSS und ohne Hilfe von Javascript-Tricks oder umständlichen CSS-Hacks so umsetzen, wie wir sie auch gestalten, in einem Grid-Layout. Das kling spannend, oder? Mit CSS Grid können wir die Bestandteile einer Webseite (wie Header, Footer, Sidebar oder Inhaltsblöcke) flexibel und unabhängig von ihrer eigentlichen Position im Markup so positionieren, wie wir es für das Webdesign benötigen. Hier ein erster Überblick, wie das genau funktioniert.

So funktioniert CSS Grid

Seither haben wir alles mögliche Unternommen (floating, Flexbox und Javascript-Hacks), um unsere Webseiten-Layouts in der Programmierung so umsetzen zu können, wir wir es gestalterisch je nach Bildschirmgröße für sinnvoll hielten. Oft sind wir dabei sogar an unsere Grenzen gestoßen und gewisse Layouts sind einfach nicht sauber zu realisieren.

All diese Mühen haben mit CSS Grid endlich ein Ende (juhu, imaginärer Luftsprung!). Mit CSS Grid können wir flexible Spalten und Reihen (grid rows und grid columns) anlegen und unsere Webseiten-Elemente dann komplett frei in diesem Grid platzieren.

Besonders spanned ist diese neue Möglichkeit auch für responsive Layouts, da wir jetzt viel einfacher auf die unterschiedlichsten Bildschirmformate reagieren können und unser Layout sich mit CSS Grid und ein paar Media Queries wunderbar anpassen kann.

Die CSS Grid Terminologie im Überblick

Um CSS Grid anzuwenden, benötigst du ein paar neue Begriffe, die ich hier einmal in einer kleinen Übersicht zusammen gefasst habe.

Grid container

Der Grid Container ist der äußerste Container, in dem das Grid gebaut wird. Die CSS-Klasse für dieses HTML-Element muss display: grid heißen.

Grid item

Ein Grid item ist jedes Element im Grid, das direkt im Container sitzt (also nicht die Child-Elemente innerhalb von Grid items).

Grid line

Es gibt zwei unterschiedliche Grid lines. Die vertikalen Grid-Linien werden „columns“ genannt, die horizontalen „rows“.

Grid cell

Grid cell werden alle einzelnen Zellen des Grids genannt.

Grid area

Mehrere Zellen zusammengenommen bilden eine Grid area.

Grid track

Grid tracks werden alle Spalten und Reihen des Grids genannt, also der Bereich zwischen zwei Column lines oder zwei Row lines.

Grid gap

Die Zwischenräume zwischen den Grid rows oder columns sind die Grid gaps (sie können z.B. einen festen Pixelwert von 40px haben). Im Designbereich werden diese Spalten auch gutter genannt. Die CSS-Werte sind grid-column-gap und grid-row-gap. Wichtig ist sich zu merken, dass die Zwischenräume nur innerhalb des Grids angelegt werden und nicht an den äußeren Grid lines (bzw. am Rand des Containers). Das ist anders, als es im Designbereich bei Rastersystemen (Grids) üblich ist.

Der Wert fr

fr (steht für fraction) ist ein neuer Wert, der für CSS Grid eingeführt wurde. grid-container: 1fr bedeutet, das eine Fraktion des zur Verfügung stehenden Platzes genutzt wird.

Grid template column

Du kannst deine Grid-columns z.b. so anlegen:

grid-template-columns: 2fr 1fr 1fr;

Das würde in folgendes Grid-Layout resultieren:

Grid template rows

„auto“ ist hier standard und bedeutet, dass der Inhalt die Höhe der grid-row bestimmt. Du kannst aber auch feste Pixel-Maße oder einen Prozentwert angeben.

grid-template-rows: 120px 25% auto;

CSS Grid Browser-Kompatibilität

Natürlich gibt es im Moment noch ein paar Browser, die Probleme mit der Darstellung von CSS Grid haben. Damit ist momentan vor allem der Internet Explorer 11 gemeint.

Am besten schaust du immer mal wieder bei caniuse.com vorbei, um den aktuellsten Stand der Browser-Kompatibilität zu prüfen. Windows Edge war vor ein paar Monaten noch ein Problem und unterstützt mittlerweile aber CSS Grids in der aktuellen Version.

CSS Grid jetzt schon nutzen?

Wir arbeiten gerade daran, CSS Grid Funktionen in unser neuestes WordPress-Theme Pukeko zu integrieren. Ein meiner Ansicht nach vernünftiger Ansatz bei der Nutzung von CSS Grid heute ist es zu erkennen, dass nicht alle Browser ein Webdesign genau gleich anzeigen müssen und dies sowieso schon seit responsive Webdesign nicht mehr tun.

Morten Rand-Hendriksen erklärt diesen Ansatz sehr schon in seiner CSS Grid Präsentation vom WordCamp Europe 2017. Dort beschreibt er seinen Ansatz mit den derzeitigen Möglichkeiten umzugehen. Er sagt wir sollten erkennen, dass eine Webseite in verschiedenen Browsern und auf unterschiedlichen Bildschirmgrößen anders aussieht und wir dies auch für CSS Grids nutzen können.

Er schlägt vor (und ich halte diesen Ansatz auch für den besten) ein Webdesign zu allererst mobile-first umzusetzen, ohne Hilfe von CSS Grid Eigenschaften. Wenn man diese, einspaltige Version der Webseite möglichst flexibel baut, ist es durchaus möglich, diese Version dann auch für ältere Browser (die CSS Grids noch nicht unterstützen) zu nutzen.

Danach kann man mit Hilfe von Media Queries schrittweise anfangen CSS Grid Funktionen zu nutzen, um ein komplexeres, mehrspaltiges Webseiten-Layout anzubieten.

Nur so können wir als Webentwickler die Entwicklung weiter voran treiben. Nur wenn wir die neuen Möglichkeiten möglichst früh adaptieren garantieren wir, dass sie möglichst schnell zum neuen Standard werden und das Thema Browser-Kompatibilität für CSS Grids in der Vergangenheit liegt.

Dein Feedback ist gefragt

Wie findest du CSS Grids und hast du offene Fragen? Hast du dich schon mit dem Thema auseinander gesetzt und vielleicht sogar schon eine Live-Webseite mit CSS Grid gebaut? Kennst du weitere hilfreiche Quellen zum Thema und ab wann denkst du werden CSS Grids Standard sein?

Schreib mir doch einfach einen Kommentar mit deinen Fragen und deiner Einschätzung, ich freue mich von dir zu hören.

Weitere hilfreiche Quellen zum Lernen von CSS Grid

A Complete Guide to Grid auf CSS Tricks
A New CSS Layout Buch von Rachel Andrew bei A Book Apart
CSS Grid Thematik bei Smashing Magazine
– Morten Rand-Hendriksen: CSS Grid Changes Everything (About Web Layouts) Talk auf dem WordCamp Europe 2017
– der Youtube-Channel Layout Land mit zahlreichen Tutorial Videos zum Thema CSS Grid
– eine komplette Resource-Liste: Learn CSS Grid
Beitrags-Lesezeit: ca. 4 Minuten

3 Kommentare zu “Einstieg in CSS Grid Layouts

  1. Danke für den tollen Artikel, Ellen!
    Wenn ich mich beim Berliner U-Bahnfahren so umschaue, wird mobile-first im Webdesign vorerst wohl der sinnvollste Ansatz sein. In der TV-Abteilung vom Mediamarkt dagegen frage ich mich, wie ich die internetfähigen Monsterglotzen zukünftig durch meine Haustür kriegen werde. Ich denke, es wird darauf hinauslaufen, dass wir uns per touchless Gestures Info-Blöcke auf große Screens werfen werden und dort anordnen können. CSS Grids sind da doch ein prima Anfang.

  2. Was legt fest, wann etwas zum Standard wird? Ist es die Bereitschaft des Kunden, neue Technologien auf Empfehlung des Dienstleisters zuzulassen? Ist es die Abdeckung durch Browser? Die Browser entwickeln in immer kürzeren Abständen neue Features und Korrekturen. Seitens Browserfähigkeit wird es keine sechs Monate mehr dauern bis CSS-Grid und Flexbox standardisiert eingesetzt werden kann. Lässt der Kunde diese Technologie jedoch nicht zu aus dem Irrtum heraus, Kunden nicht erreichen zu können, dann ist es nicht wirklich absehbar. Man kann sich hier durchaus die Frage stellen, ob der Aufwand in Fallback-Lösung dagegen wirtschaftlich ist. Ich denke nicht. Wer früh auf innovative Technologien setzt demonstriert sein innovatives Handeln doch erst. Und das möchte doch irgendwie jede IT-Agentur – innovative Lösungen anbieten. Zumindest steht es auf jeder Startseite: wir bieten/sind/leben Inovation. Entscheide ich mich wirklich für den Fortschritt, ändern sich Werte und Strukturen.

    Beste Grüße,
    Jonathan

  3. Ich finde CSS Grid eine wirklich tolle Sache.
    Ich bin schon gespannt, wann wir in 2018 vermehrt Webseiten im Internet haben, die auf CSS Grid aufbauen. Ich bin wie sich das Internet durch CSS Grid in Bereichen Design, Responsive und Funktion weiter entwickeln wird bzw. verändern wird.
    Ich bin sehr gespannt auf das Duell Bootstrapp 4 vs. CSS Grid. Ich denke, dass langfristig CSS Grid gewinnt.
    Für den Internet Explorer 10 & 11 und alte Edge Versionen gibt es einen alten CSS Grid Syntax von Microsoft. Dort heißt es z.B. nicht „display: grid“ sondern „-ms-display: grid“. Dieser kann wunderbar als Fallback eingebaut werden. Insoweit könnte der wirklich sehr gute Artikel noch um den MS Grid Fallback ergänzt werden.
    Die Flexbox kann als Ergänzung zu CSS Grid weiterhin wunderbar Verwendung finden.
    Ich habe es schon geschafft, ein CSS-Grid Layout inkl. MS Grid Fallback in meine Contao CMS Webseite zu integrieren. Beschreibung dazu folgt demnächst auf meinem Blog.

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *