, ein für den Autor und vielleicht sogar ein

Für weitere Informationen.

Grid-Grundlagen

Lassen Sie uns nun einige Stile beginnen, indem Sie diese Elemente in einem Raster anordnen. 

HinweisWenn dies der erste Vorstoß in „Grid“ ist, möchten Sie vielleicht die ersten Tutorials in Grundlegendes zu CSS-Grid-Layout lesen.

Wir werden hier zuerst mobil gehen, also geben die ersten Stile unserem Wrapper eine Breite, zentrieren ihn und legen dann einige Rasterregeln fest:

.Band Breite: 90%; Max-Breite: 1240px; Marge: 0 auto; Anzeige: Raster; Rastervorlagen-Spalten: 1fr; Raster-Vorlage-Zeilen: Auto; Gitterlücke: 20px; 

Am wichtigsten ist, dass wir hier unsere Aussage machen .Band wird sein Anzeige: Raster;. Wir erklären dann Raster-Vorlage-Spalten von 1fr, Das besagt, dass jede Kolonne einen Bruchteil der verfügbaren Kapazität beansprucht. Wir haben vorerst nur eine deklariert, sodass jede Spalte die gesamte Breite ausfüllt.

Dann behaupten wir Raster-Vorlage-Zeilen: Auto;. Dies ist eigentlich der Standardwert, daher hätten wir ihn weglassen können und bedeuten, dass die Zeilenhöhen rein durch den Inhalt bestimmt werden.

Zum Schluss definieren wir a Netzlücke von 20px, das gibt uns unsere Kolonnen- und Reihenrinnen.

Medienanfrage Numero Uno

Bei breiteren Ansichtsfenstern (500px ist völlig willkürlich) ändern wir die Ansicht Raster-Vorlage-Spalten uns zwei mögliche Karten pro Reihe geben. Jetzt gibt es zwei Spalten, von denen jede eine der verfügbaren zwei Brüche ist.

@media only screen und (min-width: 500px) .band grid-template-column: 1fr 1fr; 

Medienabfragenummer Dos

Für größere Bildschirme gilt schließlich ein vierspaltiges Layout.

@media only screen und (min-width: 850px) .band grid-template-column: 1fr 1fr 1fr 1fr; 

Hier hätten wir auch schreiben können wiederholen (4, 1fr) anstatt 1fr 1fr 1fr 1fr. Weitere Informationen dazu, wie die fr Einheit funktioniert, überprüfen Sie das CSS-Rasterlayout: Flüssigkeitssäulen und bessere Gitter.

Was hat uns das gebracht??

Karten gestalten

Das gibt uns ein ziemlich solides Rasterlayout, und wenn Sie ein Fan von Brutalismus sind, möchten Sie vielleicht Dinge wie dieses beibehalten, aber für alle anderen lassen wir unsere Karten ein bisschen wie Karten aussehen.

Wir fangen damit an:

.Karte Hintergrund: Weiß; Textdekoration: keine; Farbe: # 444; Box-Schatten: 0 2px 5px rgba (0,0,0,0,1); Anzeige: Flex; Flex-Richtung: Spalte; Mindesthöhe: 100%; 

Dies gibt uns einige Grundstile: einen weißen Hintergrund, keine Unterstreichung für den Text, eine graue Farbe und einen ordentlichen Box Schatten um uns etwas Tiefe zu geben.

Als nächstes erklären wir die Karte zu sein Anzeige: Flex;. Dies ist wichtig. Wir werden den Inhalt der Karte mithilfe von Flexbox vertikal ausrichten. Deshalb sagen wir auch Flex-Richtung: Spalte; um uns unsere vertikale Achse zu geben. Zum Schluss erklären wir Mindesthöhe: 100%; Damit alle Karten die Höhe des übergeordneten Elements (unser Gitterelement) ausfüllen. Gute Arbeit! Das gibt uns das:

Hover State

Lassen Sie uns noch ein paar weitere Verbesserungen vornehmen, bevor Sie in Flexbox weiter einsteigen. Füge hinzu ein Position: relativ; und ein Übergang damit wir die Karte im Schwebeflug verschieben können:

 Position: relativ; oben: 0; Übergang: alle .1s Leichtigkeit;

Dann heben Sie die Karte im Schwebeflug leicht an und machen den Schatten stärker:

.Karte: Schweben top: -2px; Box-Schatten: 0 4px 5px rgba (0,0,0,0,2); 

Typografie

Jetzt fügen wir der Typografie einige allgemeine Stile hinzu, um die Farben und den Abstand zu ändern.

.Kartenartikel Polsterung: 20px;  / * Typografie * / .card h1 Schriftgröße: 20px; Marge: 0; Farbe: # 333;  .card p Zeilenhöhe: 1,4;  .card span font-size: 12px; Schriftdicke: fett; Farbe: # 999; Text-Transformation: Großbuchstaben; Buchstabenabstand: .05em; Marge: 2em 0 0 0; 

Folgendes sollten Sie haben:

Thumbnails

Jedes Miniaturbild wird als Hintergrundbild angewendet. Wir fügen also auf der ganzen Linie einige Markierungen hinzu, beispielsweise:

Jetzt stellen wir sicher, dass .Daumen divs haben einige Dimensionen und werden von den Hintergrundbildern richtig ausgefüllt:

.card .thumb Polsterung unten: 60%; Hintergrundgröße: Cover; Hintergrundposition: Mitte Mitte; 

Gute Arbeit, das gibt uns folgendes:

Flexbox-Artikel

Jetzt möchten wir, dass der Name des Autors am unteren Rand der Karte ausgerichtet wird, unabhängig davon, wie viel Inhalt darüber ist. Hier kommt Flexbox wieder ins Spiel:

.Kartenartikel Polsterung: 20px; flex: 1; Anzeige: Flex; Flex-Richtung: Spalte; Begründungsinhalt: Leerzeichen; 

Wir benutzen die Abkürzung flex: 1; zu sagen, dass dieser Flexartikel (er ist noch ein Kind des ursprünglichen Flexbehälters) den verfügbaren Platz beanspruchen sollte.

Dann erklären wir, dass der Artikel ein eigenständiger Flex-Container ist, und wir deklarieren erneut Flex-Richtung: Spalte; um uns vertikal zu verteilen. zuletzt, Begründungsinhalt: Leerzeichen; besagt, dass alle Flex-Elemente in diesem Bereich gleichmäßig entlang der Achse verteilt sein sollten, mit gleichem Abstand zwischen ihnen.

Das ist alles großartig, aber es gibt uns diese seltsamen, wandernden Absätze in der Mitte unserer Karten.

Um diese richtig auszurichten, lassen Sie uns hinzufügen Flex-Grow: 1; (oder einfach flex: 1;), so füllen sie den gesamten verbleibenden vertikalen Raum aus und richten sich gut nach oben aus.

.Karte p flex: 1; / * p machen, um den verfügbaren Platz zu füllen * / Zeilenhöhe: 1.4; 

Besser!

Das Raster ändern

An diesem Punkt sind wir ziemlich fertig, aber das eine, was Grid uns jetzt erlaubt, ist das Layout komplett zu ändern, indem wir unsere Gitterelemente an beliebiger Stelle und in beliebiger Größe platzieren. Für diese Demo wollten wir die allererste Karte (nennen wir sie unsere "vorgestellte Karte") zwei Spalten breit für alle anderen als die kleinsten Ansichtsfenster machen.

Lassen Sie uns in unserer ersten Medienanfrage folgendes tun:

@media only screen und (min-width: 500px) … item-1 grid-column: 1 / span 2; 

Um auf unser Einführungs-Tutorial zu Rasterfeldern zurückzukommen, sagen wir hier, dass der erste Punkt nach 500px auf Rasterlinie 1 beginnen und sich über zwei Spuren erstrecken sollte. Die restlichen Elemente werden automatisch eingefügt.

Innerhalb dieser Medienabfrage habe ich auch die gestoßen Schriftgröße der Überschrift in unserer vorgestellten Karte.

Fazit

Dies ist eine gute Übung bei der Verwendung von Grid mit Flexbox. Grid kümmerte sich um unser zweidimensionales Hauptlayout, und Flexbox kümmerte sich um die vertikale Verteilung der Elemente in unseren Karten. Viel Spaß damit, herumzuspielen!

Lesen Sie weiter

• Grundlegendes zur Tutorialserie zum CSS-Rasterlayout
• Soll ich Grid oder Flexbox verwenden? von Rachel Andrew
• Entwerfen von kartenbasierten Benutzeroberflächen im Smashing Magazine
  
• bbc.co.uk Beta-Startseite
• Schneller Tipp: Fügen Sie Ihren CodePen-Demos eine @supports-CSS-Datei hinzu