Erstellen Sie mit CSS Grid ein ansprechendes Layout

CSS-Rasterlayout Die Browserunterstützung wächst täglich und wir können CSS Grid an die Produktion liefern. Die schnelle Einführung von CSS Grid war wirklich bemerkenswert.

Bevor wir mit CSS Grid ein responsives Portfolio-Site-Layout erstellen, klären wir einige Dinge: CSS Grid ist kein Ersatz für Flexbox . Es ist nicht einmal ein Ersatz für Schwimmer. Möglicherweise stellen Sie sogar fest, dass wir Flexbox verwendet haben, um Dinge zu tun, die CSS Grid viel besser macht. Aber anstatt in Ersatz zu denken, können wir in Kombination denken.

Stellen Sie sich ein Erdnussbutter-Gelee-Sandwich vor. Erdnussbutter und Gelee sind für sich genommen ziemlich gut, aber wenn sie zusammenkommen, wird etwas Neues geboren und Magie passiert.



Das ist was unser Website-Layout Werkzeuge sind wie. Sie sind großartig in den Dingen, die sie individuell tun, aber wenn sie kombiniert werden, geschieht Magie und wir können neue und aufregende Layouts erstellen. In diesem Fall erstellen wir mit CSS Grid und Flexbox eine eigene Webentwicklungs-PB & J. Möchten Sie Ihren Prozess noch weiter vereinfachen? Wähle einen anständigen Webseitenersteller .

01. Richten Sie Ihr Markup ein

Titel der Fallstudie wiederholt

Unser Layout sieht nicht nach viel aus, aber das Skelett mit unseren sechs Elementen ist vorhanden

In diesem Tutorial werden wir CSS Grid und Flexbox zusammen verwenden, um ein ansprechendes Portfolio-Layout zu erstellen. Jedes dieser Felder hat eine andere Größe, einige erstrecken sich über mehrere Zeilen und jedes Feld hat einen Titel, der sich unten befindet. Wir werden einige der großartigen Ausrichtungswerkzeuge verwenden, die mit Flexbox geliefert werden, um dies zu erreichen.

Beginnen wir mit dem Einrichten unseres Markups.

  • Case Study Title

    A catchy description for our case study. We worked hard.

Wir werden dieses Listenelement und alles darin sechs Mal duplizieren, damit wir Elemente zum Spielen haben. Falls Sie sich fragen, haben wir uns für die Verwendung von entschieden das Element hier, weil dies eine Liste von Einträgen ist. Fühlen Sie sich frei, alles zu verwenden, was sich für Sie richtig anfühlt.

Innerhalb des Listenelements haben wir eine div mit der Klasse von .boxes__text-wrapper das wird den Titel der Fallstudie und die dazugehörige Beschreibung enthalten.

02. Schreiben Sie Basisstile

Fallstudientitel mit unterschiedlichem Design

Wir haben unsere Schriftart auf etwas Schöneres eingestellt und den Standardrand aus Überschriften und Absätzen entfernt

Lassen Sie uns nun einige Basisstile festlegen, mit denen gearbeitet werden soll.

body { font-family: Avenir, sans-serif; margin: 2rem auto; width: 95%; } h2, p { margin: 0; } ul { list-style: none; padding: 0; margin: 0; } .boxes > * { padding: .5rem; background-color: #333; color: white; }

Wir haben die Schriftart in Avenir geändert. Wir entfernen den Rand aus unserer Überschrift und unserem Absatz und setzen die ungeordnete Liste zurück. Außerdem geben wir jedem Listenelement einige Standardstile, damit wir sehen können, wo sich die einzelnen befinden.

03. Richten Sie Ihr Raster ein

Fallstudientitel mit Lücken dazwischen

Mit nur drei Zeilen haben wir eine Rinne zwischen unsere Gitterelemente eingefügt und sie etwas größer gemacht

Wir wollen zuerst unser Layout für Mobilgeräte erstellen. So einfach ist es, unser Raster auf kleinen Bildschirmen einzurichten:

.boxes { display: grid; grid-auto-rows: minmax(125px, auto); grid-gap: .5rem; }

Das Raster stapelt unsere Artikel übereinander, da standardmäßig nur eine Spalte vorhanden ist. Wir werden zwischen den einzelnen Fallstudien mithilfe von etwas Platz schaffen Gitterlücke - Dadurch können wir eine Rinne zwischen Zeilen und Spalten hinzufügen.

Vergessen Sie, Spalten einen Rand hinzuzufügen, nur um komplexe zu benötigen n-tes Kind Selektoren; Dachrinnen erscheinen nur zwischen Spalten oder Zeilen, niemals nach oder vor einer Spalte oder row.grid-gap ist die Abkürzung von Gitter-Spalten-Lücke und Gitterreihenlücke . Normalerweise verwenden wir die Langschrift, aber wir werden beide überschreiben, wenn der Browser wächst, sodass wir die Kurzschrift verwenden.

Als nächstes verwenden wir Raster-Auto-Zeilen um unserem Gittercontainer die Höhe neuer Zeilen mitzuteilen. Grid erstellt neue Zeilen, um alle unsere Inhalte zu platzieren. Wir können die Größe dieser automatisch erstellten Zeilen mit dem steuern Raster-Auto-Zeilen Eigentum. Wir verwenden eine neue Funktion, die uns zur Verfügung steht: Minimal Maximal() . Mit Minimal Maximal() Wir können eine minimale und eine maximale Größe angeben.

Mit unserem Code möchten wir, dass unsere Zeilen mindestens 120 Pixel und höchstens automatisch automatisch sind. Wir verwenden hier Auto, weil wir möchten, dass unsere Zeilen wachsen, wenn der Inhalt dies rechtfertigt.

04. Richten Sie die Kompatibilität mit großen Browsern ein

Fallstudientitel in einer Reihe

Unser Gitter nimmt Gestalt an! Wir haben sechs Spalten zum Arbeiten und weniger Rinnen zwischen unseren Rasterelementen

Lassen Sie uns unsere Seite so einrichten, dass unser Rastercontainer bei einem Browser von 40 oder mehr sechs Spalten mit jeweils einem Bruch enthält.

@media screen and (min-width: 40em) { .boxes { grid-template-columns: repeat(6, 1fr); grid-gap: 2px; } }

Gitter-Vorlagen-Spalten ist die Eigenschaft, mit der wir unserem Raster mitteilen, wie viele Spalten vorhanden sein sollen. Es akzeptiert alle Längeneinheiten, die wir kennen und lieben, wie z Geschäft , im , px , Prozentsätze, vw , vh und fr .

Das fr ist eine neue Einheit, die wir mit CSS Grid Layout erhalten. Damit können wir dem Browser sagen, dass er anstelle von uns rechnen soll - ausgezeichnet.

Indem der Browser angewiesen wird, sechs Spalten mit einem Bruch zu erstellen, berechnet der Browser die Breite unseres Rastercontainers und teilt ihn in sechs gleiche Spalten auf. Da Grid intelligent ist, wird der verbleibende Platz erst nach Berechnung der von uns angegebenen Rinne aufgeteilt.

05. Einzelne Gegenstände stylen

Fallstudientitel mit einem Bild dahinter

Kaffee lässt alles schöner aussehen, nicht wahr? Auch der subtile Farbverlauf hebt unseren Titel und unsere Beschreibung hervor

Unsere Fallstudien sehen ein wenig eintönig aus, nur graue Kästchen. Fügen wir ein Hintergrundbild hinzu, lassen Sie unsere Titel unten in diesen Feldern anzeigen und fügen Sie einen Verlauf hinzu, damit unser Titel hervorsticht.

.boxes li { background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.8)), url(path/to/image); background-size: cover; display: flex; align-items: flex-end; }

Dieses Hintergrundbild war ein freies Bild von Unsplash Sie können jedoch jedes gewünschte Bild verwenden. Ich bringe auch Flexbox in den Mix ein, um unseren Text am unteren Rand unserer Boxen auszurichten. Sie werden das noch nicht sehen, aber wenn wir jede einzelne Box platzieren, werden Sie irgendwann sehen, dass es funktioniert.

06. Platziere Gegenstände auf dem Gitter

Fallstudientitel mit einem Bild oben und fünf unten

Mit Grid können Sie unsere Grid-Elemente ganz einfach nach Belieben dimensionieren. Dies ist jedoch nur der Anfang

Leider hat Grid keine Möglichkeit, Elemente automatisch in das Grid-Layout zu platzieren, das wir zu Beginn gesehen haben. Zum Glück gibt uns Grid jedoch die Werkzeuge, um dies ganz einfach manuell zu tun. In diesem Tutorial verwenden wir das n-te Kind, um jedes Listenelement zu platzieren. Auf einer Produktionswebsite empfehlen wir die Verwendung einer Klasse, die bei richtiger Planung die Automatisierung solcher Layouts auf einer inhaltsintensiven Website ermöglicht.

Beginnen wir mit unserem ersten Artikel.

@media screen and (min-width: 40em) { .boxes li:nth-child(1) { grid-column: 1 / -1; grid-row: span 3; } }

Wir werden alle unsere Platzierungsstile in diese Medienabfrage einfügen, die wir zuvor geschrieben haben, da wir möchten, dass dieses Layout ausgeführt wird, nachdem unser Browser 40em oder größer ist. Mit n-tes Kind Wir zielen auf das erste Listenelement ab. Mit CSS Grid können wir unsere Elemente einfach mit Rasterspalten und Rasterzeilen platzieren. Es gibt viele verschiedene Möglichkeiten, um anzugeben, wo sich Elemente befinden sollen. Hier weisen wir unser Element jedoch an, an der ersten Spalte zu beginnen und den gesamten Container mit -1 zu überspannen.

Dann weisen wir das Element mit der Gitterreihe an, drei Reihen zu überspannen. Woher wissen wir, dass drei Zeilen die gewünschte Größe haben? Nun, wir haben die Größe dieser Zeilen vor einigen Augenblicken mit Raster-Auto-Zeilen angegeben. Wenn wir mit ihnen nicht zufrieden sind, können wir die Mindestgröße ändern.

Platzieren wir den Rest unserer Artikel.

@media screen and (min-width: 40em) { .boxes li:nth-child(2) { grid-column: span 2; grid-row: span 7; } .boxes li:nth-child(3) { grid-column: span 4; grid-row: span 3; } .boxes li:nth-child(4) { grid-column: span 2; grid-row: span 4; } .boxes li:nth-child(5), .boxes li:nth-child(6) { grid-column: span 2; grid-row: span 2; } }

Ist es nicht erstaunlich, wie viel Kontrolle das Rasterlayout uns gibt? Mit nur wenigen Codezeilen können wir ein vollständig ansprechendes Layout zusammenstellen, das nicht beschädigt wird, wenn weitere Elemente hinzugefügt werden.

Sicher, sie sehen vielleicht etwas wackelig aus, weil sie standardmäßig nur eine Rasterspalte und -zeile einnehmen, aber unser Layout wird dadurch nicht beschädigt. Wenn wir dies mit Floats und festen Breiten und Höhen tun würden, wären wir in der Klemme, wenn mehr Inhalt hinzugefügt würde.

fertiges Layout mit verschiedenen Bildern an verschiedenen Orten

Unser fertiges Layout! Ist das nicht erstaunlich? Mit dem Raster können wir unsere Artikel problemlos in zwei Dimensionen platzieren

Ein kurzer Überblick über ältere Browser

OK, es ist Zeit, den Elefanten im Raum anzusprechen. 'Was ist mit älteren Browsern?' Die Antwort auf diese Frage ist dieselbe wie für alle neuen Funktionen in CSS: Verwenden Sie Funktionsabfragen und nutzen Sie die Kaskade. Feature-Abfragen sind sehr gut unterstützt und wo sie nicht sind, können wir unseren Fallback zuerst platzieren. Zum Beispiel würden wir etwas in der Art schreiben:

.your-selector { display: flex; } /* Your Grid code */ @supports (display: grid) { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 1rem 2rem; }

Wenn Sie unseren Code auf diese Weise schreiben, bedeutet dies, dass der Browser, wenn er das Rasterlayout versteht, diesen anstelle von Flexbox verwendet. Da wir die Kaskade nutzen, werden sie von Browsern, die Feature-Abfragen nicht verstehen, ignoriert und verfügen bereits über die erforderlichen Informationen. Möglicherweise müssen wir planen, wie wir unsere Stile etwas mehr als gewöhnlich schreiben, aber auf diese Weise können wir gut aussehende Layouts mit vernünftigen Fallbacks erstellen. Wenn Sie Ihre alten Seiten speichern möchten, exportieren Sie sie als PDFs und speichern Sie sie in Cloud-Speicher .

Außerdem wird CSS Grid im Laufe der Zeit immer mehr unterstützt. Denken Sie nur daran, wie großartig es wäre, unsere Fallbacks später zu löschen und das gesamte Grid-bezogene CSS zu belassen. Wenn Sie mehr über Grid erfahren, werden Sie feststellen, dass es viele Dinge tut, die wir derzeit mit viel weniger CSS-Zeilen tun. Denken Sie daran, wenn Sie eine besonders komplexe Site haben, Ihre Web-Hosting Service muss auf dem neuesten Stand sein.

Dieser Artikel erschien ursprünglich in Netzmagazin , das weltweit führende Magazin für Entwickler und Webdesigner. Abonnieren Sie hier .

Weiterlesen: