10 praktische CSS-Grid-Code-Snippets

Die CSS-Grid-Spezifikation ist nicht gerade „neu“, aber sie ist definitiv neuer in der Mainstream-Entwicklerwelt. Viele Frontend-Programmierer wissen noch nicht einmal etwas über die CSS-Grid-Eigenschaften, geschweige denn, wie sie sich auf eine Schnittstelle beziehen.

Sie können viele Tutorials finden, indem Sie sich umsehen, aber ich empfehle auch, Code-Snippets zu studieren. Auf diese Weise tauchen Sie in reale Projekte ein, damit Sie sehen können, wie CSS-Raster auf einer Live-Webseite funktionieren.

Diese Sammlung sollte viele Ressourcen bieten, die Ihnen dabei helfen, CSS-Raster für alles, was Sie im Web tun, zu lernen, anzupassen und neu zu gestalten.

1. Heldenblock mit mehreren Bildern

Beginnen wir mit diesem wirklich coolen Heldenblock, der mit Gittereigenschaften entworfen wurde. Dieses Design ahmt den Abschnitt mit Heldenbildern auf der Startseite nach, den Sie auf vielen Websites im Magazinstil finden.

Entwicklerin Rachel Andrew hat dies mit ein wenig benutzerdefiniertem CSS aus ihren eigenen Projekten erstellt. Es funktioniert unglaublich gut und das Design reagiert vollständig auf das Booten.

Ganz zu schweigen davon, dass es auf mobilen Bildschirmen fantastisch aussieht; bei großen Bildblöcken findet man das nicht immer.

Dies ist eine ausgezeichnete Ressource zum Studium von CSS-Grids und ein praktischer Ausschnitt für jeden, der ein Blog-Thema im Stil einer Zeitschrift programmiert.

2. CSS-Grid-Layout

Die Grid-Auto-Flow-Eigenschaft wird in dieser Demo mit der Einstellung „dicht“ vollständig angezeigt. Dadurch werden Elemente gezwungen, weiter unten auf der Seite hineinzuquetschen, wenn sich die Größe des Rasters ändert.

Mit dieser Einstellung haben Sie viel Kontrolle darüber, welche Seitenelemente ihre Position ändern, wo diese Änderungen stattfinden und wie das Raster reagieren soll. Dies steht im Vordergrund gegenüber Medienabfragen, die hauptsächlich im Responsive Design verwendet werden.

Wenn Sie sich nicht sicher sind, was dieser Code bewirkt, denken Sie einfach daran: Google ist Ihr Freund! Viele großartige Posts und Stack Overflow-Threads, die dieses gesamte Setup abdecken.

3. Nicht so gruselige Kürbis-Fakten

Hier ist ein ziemlich cooler Ausschnitt, der mit einigen grundlegenden Kürbisfakten erstellt wurde. Nun, Kürbisfakten, die durch ein CSS-Rasterlayout organisiert sind.

Der Code läuft tatsächlich auf SCSS/Sass, was bedeutet, dass Sie mit der Sprache vertraut sein müssen, um sich einzuarbeiten. Sie können den Sass-Code jedoch auch direkt in CodePen in rohes CSS kompilieren, wenn Sie die grundlegenden Eigenschaften sehen möchten.

Eines meiner Lieblingsdinge an diesem Design ist die Farbe und Typografie. Es schreit wirklich nach Halloween mit dem Kürbissymbol und all diesen Gelb-/Orangetönen.

4. Automatisches sechseckiges Layout

Dies ist vielleicht eines der praktischsten Projekte, die ich für diese Galerie gefunden habe. Sehen Sie sich diesen Rasterstil an und versuchen Sie, die Größe Ihres Browsers zu ändern.

Sie werden feststellen, dass sich die sechseckigen Elemente neu formatieren, um entsprechend in die Seite zu passen. Dies ist wahrscheinlich der beste Weg, um komplexe Seiten mit vielen Fotos zu handhaben. Ich sehe diese Art von Layout oft auf Konferenz-Websites und „Über uns“-Seiten für Unternehmen mit vielen Mitarbeitern.

Mit der CSS-Rasterstruktur müssen Sie sich jetzt keine Gedanken mehr über manuelle Responsive-Styles machen. Und dieses Code-Snippet ist der beste Ausgangspunkt für die Planung eines ähnlichen Layouts.

5. Pokedex im CSS-Raster

Ich habe noch nie etwas so Kreatives wie diesen Pokedex in einem CSS-Raster gesehen. Es basiert auf HTML und CSS mit etwas JavaScript zum automatischen Ausfüllen der Zellengröße.

Wenn Sie die Größe der Seite ändern, werden Sie feststellen, dass auch die Grafiken selbst größer werden. Dies ist mit CSS verdammt einfach zu handhaben, und es ist sogar noch einfacher, wenn Sie einige der Grid-Eigenschaften kennen.

Beachten Sie, dass dies nicht interaktiv ist, sodass Sie nichts anklicken oder neue Seiten öffnen können. Aber mit der in Stein gemeißelten Layout-Grundlage wäre es verdammt einfach, diese Funktionen hinzuzufügen.

6. Einfaches Gitter

Hier ist eine wirklich interessante Idee, die Druckdesignstile ins Internet bringt. Sehen Sie sich dieses Beispiel auf CodePen mit vielen Spalten mit Überschriften und übergroßer Typografie an.

Das Rasterlayout selbst basiert auf festgelegten Spalten mit vordefinierten Lücken. Das bedeutet, wenn Sie die Größe des Browsers ändern, werden bestimmte Spalten gemäß diesen Regeln aufgelöst.

Auf diese Weise können Sie sicherstellen, dass bestimmte Spalten immer nebeneinander oder zumindest sichtbar angezeigt werden, damit sie gut lesbar sind.

7. CSS-Grid mit Flexbox-Fallback

Nicht alle Browser haben die CSS-Rasterstruktur eingeholt. Aus diesem Grund lernen Sie in diesem Snippet, wie Sie ein benutzerdefiniertes CSS-Raster mit Flexbox (und Floats) als Fallback entwerfen.

Dies ist tatsächlich schwierig, da Sie die Grid-Eigenschaften verwenden möchten, wenn sie unterstützt werden, aber Sie möchten, dass der Browser sie ignoriert, wenn dies nicht der Fall ist. Glücklicherweise ist der Code gut kommentiert, sodass Sie sich durchgraben und sogar versuchen können, einige der Funktionen selbst anzupassen.

Ich würde das nicht als perfekte Fallback-Lösung bezeichnen, aber es ist definitiv besser als nichts.

8. Grid-Terminologie-Demo

Sind Sie sich nicht sicher über all diese verwirrende CSS-Grid-Terminologie? Dann kann dieser Ausschnitt zur Klärung beitragen.

Wenn Sie sich mit diesem Beispiel befassen, werden Sie einige hervorgehobene Funktionen mit Beschreibungen finden, die die Gitter auf dem Weg erklären. Sie lernen auch, wie Sie die Gitterlinien richtig betrachten und wie Sie CSS-Raster auf der Seite genau sehen.

Beachten Sie, dass Sie dieser Demo nicht alles entnehmen können, da sie nicht alles abdeckt. Es ist nur eine kleine Einführung in die einfachsten Eigenschaften mit visuellen Hilfen.

9. Grid-Template-Columns verwenden: repeat()

Für ein sehr spezifisches Beispiel der Grid-Template-Columns-Eigenschaft werfen Sie einen Blick auf diese Live-Demo. Es zeigt Ihnen, wie Sie die Wiederholungsfunktion verwenden, anstatt denselben Spaltenwert mehrmals in Ihrem CSS zu deklarieren.

Auch hier holt die Browserunterstützung noch auf, aber die meisten modernen Webbrowser arbeiten mit dieser Technik.

Ganz zu schweigen davon, dass Sie im CSS zahlreiche Kommentare finden werden, die Ihnen helfen zu verstehen, was dies bewirkt.

10. Reines CSS-Raster-Kreuzworträtsel

Um mit einer lustigen Anmerkung zu enden, werfen Sie einen Blick auf das reine CSS-Kreuzworträtsel von Adrian Roworth. Dieses gesamte Layout basiert ausschließlich auf HTML- und CSS-Code, insbesondere auf den CSS-Rastereigenschaften für die Layoutstruktur.

Noch verrückter ist, dass Sie Inhalte in die Kreuzworträtselfelder eingeben können, um die Rätsel tatsächlich zu lösen. Wie cool ist das!

Beachten Sie, dass dieses Ding ziemlich komplex ist und eines der wenigen hier aufgeführten Projekte ist, das nicht für Mobilgeräte geeignet ist. Aber es ist ein Beweis dafür, wie weit wir mit Grid-Layouts im Web gekommen sind, also hoffe ich, dass wir in naher Zukunft noch viel mehr von dieser Art Zeug sehen werden.