CSS Grid Starter Layouts - CSS-Tricks

Dies ist eine Sammlung von Startervorlagen für Layouts und Muster mit CSS Grid. Hier geht es darum zu zeigen, wozu die Technik in der Lage ist, und einen Ausgangspunkt zu bieten, der für andere Projekte neu bestimmt werden kann.

Denken Sie daran, dass die Browserunterstützung für Grid gut ist, für ältere Browser jedoch Fallbacks erforderlich sind. Das bedeutet, dass ein einfaches Kopieren und Einfügen dieser Elemente für einige Anwendungsfälle möglicherweise nicht gut geeignet ist.

Heiliger Gral Layout

Das alte klassische dreispaltige Layout, bei dem zwei Seitenleisten und ein Container mit der Textkopie zwischen einer Kopf- und Fußzeile in voller Breite angeordnet sind.

Flexibler Heiliger Gral

Alles bleibt erhalten, wenn sich die Breite des Ansichtsfensters mithilfe eines Flüssigkeitsinhaltsbehälters ändert.

Siehe das Pen CSS Grid - Holy Grail 2 von Geoff Graham (@geoffgraham) auf CodePen.

Responsive Heiliger Gral

Sobald das Ansichtsfenster eng wird, werden die Dinge gestapelt.

Siehe das Stift-CSS-Raster: Holy Grail Layout - Responsive von Geoff Graham (@geoffgraham) auf CodePen.

2-Spalten mit Kopf- und Fußzeile

Ein klassisches Blog-Layout, bei dem eine Spalte für den Beitrag und die andere für eine Seitenleiste vorgesehen ist.

Flexible 2-Säulen

Das Layout wird matschig, wenn das Ansichtsfenster schmal wird, das Layout jedoch erhalten bleibt.

Siehe das Stift-CSS-Raster: Kopf- und Fußzeile mit 2 Spalten (flexibel) von Geoff Graham (@geoffgraham) auf CodePen.

Responsive 2-Spalten

Dinge werden auf kleineren Bildschirmen gestapelt.

Siehe das Stift-CSS-Raster: Kopf- und Fußzeile mit 2 Spalten (Responsive) von Geoff Graham (@geoffgraham) auf CodePen.

Gleichmäßig verteilt, nach Bedarf fit

Elemente fließen in das Layout und enden, wenn keine mehr vorhanden sind.

Sehen Sie sich das gleichmäßig verteilte Stift-CSS-Raster an, das von Geoff Graham (@geoffgraham) auf CodePen benötigt wird.

Artikel mit Ausbruch

Ein großartiger kleiner Trick von Tyler Sticka, mit dem ein Element aus dem Raster ausbrechen kann. Rachel Andrew erklärt ausführlich, wie benannte Gitterlinien dies ermöglichen.

Siehe das Pen CSS Grid: Artikel mit Breakout von Geoff Graham (@geoffgraham) auf CodePen.

Grundkalender

Wie zu erwarten, funktioniert CSS Grid gut für ein Kalenderraster.

Siehe das Stift-CSS-Raster: Kalender von Geoff Graham (@geoffgraham) auf CodePen.

Monopolbehörde

Eine einfache Nachbildung des Spielbretts. Jen Simmons hat eine süße Demo mit Monpoly-Styles.

Siehe das Pen CSS Grid: Monopoly Board von Geoff Graham (@geoffgraham) auf CodePen.

Unser Lernpartner Frontend Masters

Benötigen Sie ein Front-End-Entwicklungstraining?

Frontend Masters ist der beste Ort, um es zu bekommen. Sie bieten Kurse zu allen wichtigen Front-End-Technologien an, von React bis CSS, von Vue bis D3 und darüber hinaus mit Node.js und Full Stack.