Dies ist eine Sammlung von Startervorlagen für Layouts und Muster mit CSS Grid. Die Idee ist, zu zeigen, was die Technik leisten kann, und einen Ausgangspunkt zu bieten, der für andere Projekte wiederverwendet werden kann.
Denken Sie daran, dass die Browserunterstützung für Grid gut ist, aber Fallbacks für ältere Browser erfordert. Das bedeutet, dass ein einfaches Kopieren und Einfügen dieser Beispiele für einige Anwendungsfälle möglicherweise nicht gut geeignet ist.
Holy Grail Layout
Das alte klassische Drei-Spalten-Layout, bei dem zwei Seitenleisten und ein Container, der den Haupttext enthält, zwischen einem Vollbild-Header und Footer eingeklemmt sind.
Flexibles Holy Grail
Alles bleibt intakt, wenn sich die Ansichtsfensterbreite ändert, dank eines flexiblen Inhaltscontainers.
Siehe den Pen CSS Grid – Holy Grail 2 von Geoff Graham (@geoffgraham) auf CodePen.
Responsives Holy Grail
Die Elemente stapeln sich, sobald das Ansichtsfenster schmaler wird.
Siehe den Pen CSS Grid: Holy Grail Layout – Responsive von Geoff Graham (@geoffgraham) auf CodePen.
2 Spalten mit Header und Footer
Ein klassisches Blog-Layout, bei dem eine Spalte für den Beitrag und die andere für eine Seitenleiste dient.
Flexibles 2-Spalten-Layout
Das Layout wird bei schmaler werdendem Ansichtsfenster flexibel, behält aber seine Struktur bei.
Siehe den Pen CSS Grid: Header, Footer mit 2-Spalten (Flexibel) von Geoff Graham (@geoffgraham) auf CodePen.
Responsives 2-Spalten-Layout
Die Elemente stapeln sich auf kleineren Bildschirmen.
Siehe den Pen CSS Grid: Header, Footer mit 2-Spalten (Responsiv) von Geoff Graham (@geoffgraham) auf CodePen.
Gleichmäßig verteilt, passend nach Bedarf
Elemente fließen in das Layout und enden, wenn keine mehr vorhanden sind.
Siehe den Pen CSS Grid gleichmäßig verteilt, so viele wie benötigt von Geoff Graham (@geoffgraham) auf CodePen.
Artikel mit Ausbruch
Ein großartiger kleiner Trick von Tyler Sticka, der es einem Element ermöglicht, aus dem Raster auszubrechen. Rachel Andrew liefert eine detaillierte Erklärung, wie benannte Rasterlinien dies ermöglichen.
Siehe den Pen CSS Grid: Artikel mit Ausbruch von Geoff Graham (@geoffgraham) auf CodePen.
Basis-Kalender
Wie man erwarten könnte, funktioniert CSS Grid gut für ein Kalender-Raster.
Siehe den Pen CSS Grid: Kalender von Geoff Graham (@geoffgraham) auf CodePen.
Monopoly-Brett
Eine einfache Nachbildung des Spielbretts. Jen Simmons hat eine tolle Demo komplett mit Monopoly-Stilen.
Siehe den Pen CSS Grid: Monopoly-Brett von Geoff Graham (@geoffgraham) auf CodePen.
wunderschön
Ausgezeichnet... Ich habe mich in CSS Grid verliebt
Super hilfreich. Danke!
Das ist absolut genial. Vielen Dank dafür. Ich benutze Grid seit etwa 6 Monaten, aber nur in den grundlegendsten und sehr komplizierten Anwendungsfällen. Dies sind großartige Beispiele, um einige der obskureren, aber unglaublich nützlichen Funktionen von Grid zu demonstrieren.
Ich muss zugeben, es hat mich ein paar Monate gedauert, bis ich meine Verliebtheit in Flexbox überwunden und mich wirklich für Grid erwärmt habe, aber es hat sich gelohnt. (wo Grid Flexbox perfekt ersetzt, natürlich)
*”…und sehr _wenige_ komplizierte Fälle.” (dumme Tipperei, schneller als mein Denken)
Ja Mann, danke Vanderson! Schön, dass Sie diese nützlich finden, und ich liebe es zu hören, dass Sie sich Grid nähern. Es ist wirklich eine interessante und aufregende Zeit in CSS.
Ja, das ist der Haken. Flexbox ist immer noch fantastisch für eindimensionale Layouts (entweder Spalte oder Zeile), und Grid ist der Hammer für alles Zweidimensionale (Spalte und Zeile).
Ich bin ebenfalls sehr an CSS Grid interessiert und sehe, dass Sie es verwenden. Haben Sie Probleme mit Browserinkompatibilität festgestellt? Da wir uns noch im Übergang zwischen dem alten Weg (Flexbox/Bootstrap) und dem neuen Weg (CSS Grid all the way, baby!) befinden, war ich zögerlich, es aufgrund von Browserproblemen (und insbesondere der Akzeptanz mobiler Browser) zu verwenden.
Wie waren Ihre Erfahrungen?
Was mich an all diesen Beispiel-Grid-Layouts verwirrt, ist, dass die Zeilen fast immer in physischen Einheiten (px, vh etc.) angegeben werden, was für mich keinen Sinn ergibt, da sich die Zeilen offensichtlich an den Inhalt anpassen müssen wie eine normale Webseite (ich glaube, Grid wird die Zeilenhöhe nicht erweitern, es sei denn, es wird angegeben). Ich weiß, dass man das leicht beheben und 'auto' für die Zeilengröße verwenden kann, aber es wird in diesen Beispielen nicht oft verwendet.
Es sind im Grunde feste Höhenboxen aus den schlechten alten Tagen. Praktische Beispiele wären besser als feste Größen :)
Ich erkenne, dass dies nur eine Kleinigkeit ist
Ich habe in den Codepens herumgebastelt und vermute, dass die Höhen vorhanden sind, damit die Beispiele in diesem Artikel auf kleinem Raum gut und gut lesbar aussehen.
Ich stimme zu, ich würde niemals* eine erzwungene Höhe auf so etwas anwenden. Insbesondere bei responsiven Designanforderungen würde das Chaos anrichten.
*Natürlich gibt es immer wieder diese Randfälle. :P
Oh ja, auf jeden Fall. Alles hier dient rein dem Beispiel, denn sonst gäbe es keinen Inhalt, der zur Veranschaulichung der Konzepte angezeigt werden könnte.
Um die Einleitung zu wiederholen
Bin ich dumm oder könnte man nicht einfach eine Kombination aus min(), max() und clamp() verwenden, um die Schriftgrößen zu begrenzen?
Das können Sie absolut! Dieser Beitrag wurde ursprünglich geschrieben, bevor diese Funktionen weitgehend unterstützt wurden. Hier gibt es mehr darüber, wie das funktioniert, in diesem Beitrag.
Nützlich. Danke für die Layouts, Herr Graham.
Danke für den Artikel und die Vorlagen. CSS Grid wird zunehmend mein Go-to für fast alle meine Projekte.
Sehr hilfreich, danke!
Ich bin auch neugierig, wo ich mehr Informationen über die Berechnungen finden kann, die Sie für die responsive Schriftgröße erstellt haben? :)
Hallo Stephanie! Ich freue mich sehr, dass diese Startervorlagen hilfreich waren. :)
Hier ist ein vollständiger Bericht über die fluide Typografie, die in diesen Demos verwendet wird.
Das ist großartig! Könnte ich diese zu meiner eigenen Sammlung von Helfern/Anleitungen für meinen eigenen Gebrauch hinzufügen? (hier als Referenz: http://janzheng.com/stylecoeur/styleguide.html)
Natürlich, fügen Sie hinzu! Nehmen Sie alles, was Sie nützlich finden. :)
Ihr Ausbruch hat eine Regel für ein "fogure"-Element, aber ich sehe es nicht im Markup... Tippfehler?
Das ist tatsächlich ein echter Tippfehler. Danke für den Hinweis!
Das ist großartig.
Sehr gut. Aber ich habe eine Frage: Warum nicht einfach eine einfache Tabelle verwenden, um einen Kalender zu erstellen?
Das könnten Sie ganz sicher! Es gibt oft mehrere Wege, dasselbe zu erreichen, und eine Tabelle ist ein legitimer Weg. Aber dies ist eine Sammlung von Grid-Beispielen, keine Tabellen. :)
Großartiger Stoff! Danke Geoff :)
Ich bin ein angehender Webentwickler (fast fertig).
Ich habe gestern Morgen angefangen, Grid auszuprobieren, und bis zum Ende des Tages habe ich nur Grid verwendet. Viel einfacher und intuitiver. Ich werde hauptsächlich Grid verwenden, wegen Ihnen und einer anderen Seite.
Ich habe angefangen, Grid zu benutzen, aber ich kann nicht herausfinden, wie ich einen Vollbild-Hintergrund für ein festes Layout erstelle.
Hmm, ich bin mir nicht sicher, was dort vor sich geht. Haben Sie eine Demo? Ein voller Hintergrund sollte mit jedem Layout möglich sein, unabhängig davon, ob es fest ist oder nicht: https://codepen.io/geoffgraham/pen/PRxEEd
Das ist ein sehr nützlicher Artikel für Anfänger wie mich.
Danke Geoff Graham
Schöne Zusammenstellung. Danke!
Der Kalender ist wunderschön.
Vielen Dank!
Hallo Geoff! Ich habe letzte Woche mit dem Grid zu kämpfen gehabt. Ich habe das Monthly Mixup Grid-Layout sehr genau beobachtet, konnte aber nicht herausfinden, wie Sie die Beziehung zwischen Zeilenhöhe und Spaltenbreite beibehalten (oder verwenden Sie Breakpoints?). Ich meine, ich weiß, dass Sie sicherlich einige Breakpoints gesetzt haben, aber es gibt immer noch etwas Professionelles, das ich nicht verstehe. Können Sie mir bitte helfen? Ich möchte etwas Schönes wie Ihres auf meiner Website. Danke!!
Hallo Luke! Ich wünschte, ich könnte die Anerkennung für das Monthly Mixup-Layout beanspruchen, aber das ist alles Chris. :)
Es scheint, dass es ab dem 800px-Breakpoint zu einem Grid wird, das am Elternelement gesetzt ist. Es ist eigentlich als Sechs-Spalten-Grid eingerichtet (
grid-template-columns: repeat(6, 1fr);) und dann werden alle Kindelemente entlang der Spalten platziert (z. B.grid-column: 1 / 2für die erste Grid-Spalte) und auf den impliziten Zeilen, die Grid erstellt (z. B.grid-column: 2 / 3für die zweite Zeile).Auf diese Weise gibt es keine wirkliche Notwendigkeit für Breakpoints! Das Grid kümmert sich um Abstände und Platzierung ab einem Breakpoint von 800px und aufwärts.
Was Sie hier geschrieben haben, Geoff Graham, ist ABSOLUT UNBEZAHLBAR. Ich kann nicht glauben, dass dieser Artikel einfach kostenlos hier existiert! Er ist SO wertvoll! Es ist wie ein Traum für perfektionistische Junior-Entwickler-Typen... wie mich. Jedenfalls wollte ich Ihnen einfach nur von ganzem Herzen DANKE sagen, dass Sie diese Schönheit hier erstellt haben. ♥️
Sie können das Pseudoelement :first-letter verwenden, um responsive Kalender zu stylen, während der Titel="Sonntag" bleibt, sodass beim Überfahren mit der Maus der gesamte Kalendertag angezeigt wird.
ul.weekdays li abbr:first-letter {
font-size:calc(16px + (26 – 16) * ((100vw – 300px) / (1600 – 300)));
}
Clever!
Danke. Habe das auf meiner Website verwendet, die auch auf DigitalOcean gehostet wird.