<span><span>.container</span> {
</span>  <span>display: grid;
</span>  <span>gap: 10px;
</span>  <span>grid-template-columns: 1fr 1fr 1fr 1fr;
</span><span>}
</span>

Wir k?nnen dies in Aktion im Stift unten sehen.

Siehe die Grundlagen des Stifts

Verwenden von Zeilennummern und benannten Linien mit Gitterbereichen

Es ist erw?hnenswert, dass wir auch Zeilennummern und/oder benannte Linien verwenden k?nnen, um die Netzbereiche zu definieren. Anstatt beispielsweise die Eigenschaft für Gitter-Template zu verwenden, k?nnten wir einfach so etwas tun:

<span><span>.container</span> {
</span>  <span>display: grid;
</span><span>}
</span>

Das Muster ist Zeilenstart / Spaltenstart / Zeilen-End / Spaltenende. Sie k?nnen eine Demo davon auf CodePen überprüfen. Pers?nlich f?llt es mir sehr schwer, sich an dieses Muster von Zeilen und S?ulen zu erinnern, aber das Tolle an Grid ist, dass es viele M?glichkeiten gibt, dasselbe zu tun.

?ndern des Layouts von Gitterartikeln

In den alten Tagen, wenn wir uns irgendwann entschieden haben, das Layout unserer Seitenelemente zu ?ndern, h?tte dies wahrscheinlich zu viel Code -Refactoring geführt. Was ist beispielsweise, wenn wir das Element

<span><span><span><div</span> class<span>="container"</span>></span>
</span>  <span><span><span><header</span>></span>header<span><span></header</span>></span>
</span>  <span><span><span><aside</span>></span>aside<span><span></aside</span>></span>
</span>  <span><span><span><main</span>></span>main<span><span></main</span>></span>
</span>  <span><span><span><footer</span>></span>footer<span><span></footer</span>></span>
</span><span><span><span></div</span>></span>
</span>

Wir haben gerade eine Gitterzelle von Fu?zeile entfernt und sie beiseite zugewiesen, was zu dem führt, was wir im Stift unten sehen.

Siehe die Grundlagen des Stifts
cs

Wir k?nnten sogar entscheiden, dass wir irgendwo eine leere Zelle wollen. Wir tun dies, indem wir nur ein oder mehrere Perioden verwenden, wie SO:

<span><span>.container</span> {
</span>  <span>display: grid;
</span>  <span>gap: 10px;
</span><span>}
</span>

Weiteres Lesen:

• Erfahren Sie mehr über die Eigenschaft in der Gitterfl?che.
Verwenden von Medienabfragen mit Grid -Layout

Wir m?chten oft ein anderes Layout auf kleinen Bildschirmen - z. B. das Stapeln unserer Netzelemente in einer einzigen Spalte. Eine einfache M?glichkeit, dies zu tun

Wir haben jetzt nur eine einzige Spalte angegeben und die Reihenfolge der Elemente in dieser Spalte festgelegt.

<span><span>.container</span> {
</span>  <span>display: grid;
</span>  <span>gap: 10px;
</span>  <span>grid-template-columns: 1fr 1fr 1fr 1fr;
</span><span>}
</span>

CSS Grid: Verwenden von Medienabfragen von SitePoint (@sitepoint)

Drücken Sie die 0,5 -fach -Taste unten im obigen Stift, um zu sehen, wie das Layout reagiert (oder den Stift auf Codepen anzeigen und das Ansichtsfenster vergr??ern und einschr?nken).

?ndern der Anzeigereihenfolge der Netzelemente

Wir sind jetzt in einem guten Punkt, um zu sehen, wie einfach es ist, die Anzeigereihenfolge der Elemente im Netzlayout zu ?ndern. Im obigen Beispiel lautet unsere Quellbestellung

Wir k?nnen Gitterelemente neu ordnen, wenn sie nicht benannte Elemente verwenden. Standardm??ig werden Gitterelemente gem?? ihrer HTML -Quellordnung platziert. Sie haben auch eine Standardreihenfolge von 0. Wir k?nnen diese Auftragseigenschaft verwenden, um die visuelle Anordnung von Elementen zu ?ndern. Je niedriger der Bestellwert, desto früher erscheint ein Element. Sogar negative Ganzzahlen k?nnen verwendet werden. Wenn unser

Um unsere oben gezeigten Elemente zu bestellen, konnten wir den Bestellwert von , und auf 1, 2 bzw. 3 festlegen. (Schauen Sie sich diesen Stift für eine Live -Demo an.)

Ein Wort der Vorsicht: Nachgeordnete Elemente k?nnen ein Albtraum für die Zug?nglichkeit sein, wobei der Fokus unvorhersehbar auf dem Bildschirm springt. Verwenden Sie es also sparsam.

Weiteres Lesen:

• Die offizielle Spezifikation für die Order -Eigenschaft.
• Die auf MDN erl?uterte Ordereigenschaft, einschlie?lich eines Abschnitts zu Barrierefreiheitsproblemen.

reaktionsschnelles Gitterlayout ohne Medienabfragen

Wir haben oben gesehen, dass wir unser Layout auf verschiedene Bildschirmgr??en ansprechen k?nnen. Erstens kann das Layout nach Bedarf wachsen und schrumpfen, indem sie die Spaltenbreiten auf flexible Einheiten wie FR einstellen. Zweitens k?nnen wir Medienabfragen verwenden, um das Layout an bestimmten Haltepunkten neu zu organisieren.

Grid Layout verfügt über Tools, mit denen Layout -Reflow ohne die Verwendung von Medienabfragen. Mit dem Layout, mit dem wir oben gearbeitet haben, k?nnen wir dies jedoch nicht erreichen. Es funktioniert nur für einfachere Layouts, bei denen jede Spalte die gleiche Breite teilt.

Betrachten Sie die folgenden HTML:

<span><span>.container</span> {
</span>  <span>display: grid;
</span><span>}
</span>

Lassen Sie uns diese Divs nebeneinander auf breiten Bildschirmen setzen und auf kleinen Bildschirmen stapeln:

<span><span><span><div</span> class<span>="container"</span>></span>
</span>  <span><span><span><header</span>></span>header<span><span></header</span>></span>
</span>  <span><span><span><aside</span>></span>aside<span><span></aside</span>></span>
</span>  <span><span><span><main</span>></span>main<span><span></main</span>></span>
</span>  <span><span><span><footer</span>></span>footer<span><span></footer</span>></span>
</span><span><span><span></div</span>></span>
</span>

Sie k?nnen das Ergebnis im unten stehenden Stift sehen.

Siehe das Stift
CSS Grid Basics: Responsive Grid ohne Medienabfragen von SitePoint (@sinepoint)
auf CodePen.

(Drücken Sie erneut die 0,5 -fach -Taste unten im obigen Stift, um zu sehen, wie das Layout reagiert.)

Dieser Code ist etwas erweiterter, und wir erkl?ren ihn ausführlich in der Verwendung der Funktion CSS Grid Repect (). Der Hauptzweck, es hier zu zeigen, besteht darin, ein Gefühl dafür zu vermitteln, was mit Gitterlayout m?glich ist.

Weiteres Lesen:

• Weitere Informationen zum automatischen Schlüsselwort.
• Lesen Sie mehr über die Verwendung der Funktion minmax () mit der Funktion min ().

überlappende Elemente in einem Raster

Sobald wir ein Gitterlayout erstellt haben, k?nnen wir mehr als nur jedes Netzelement in seinem eigenen Gitterbereich zuweisen. Wir k?nnen Rasterelemente leicht einstellen, um dieselben Netzbereiche teilweise oder vollst?ndig zu teilen. Auf diese Weise k?nnen wir sch?ne, kreative Layouts erstellen - mit überlappenden Elementen und ohne schwierigen Code.

Erstellen wir ein einfaches Netz, das ein Bild und einen Text enth?lt, der das Bild teilweise abdeckt. Hier ist die HTML:

<span><span>.container</span> {
</span>  <span>display: grid;
</span><span>}
</span>

Jetzt weisen wir einige Zeilen und Spalten zu, die teilweise zwischen dem Div und dem Bild geteilt werden:

<span><span><span><div</span> class<span>="container"</span>></span>
</span>  <span><span><span><header</span>></span>header<span><span></header</span>></span>
</span>  <span><span><span><aside</span>></span>aside<span><span></aside</span>></span>
</span>  <span><span><span><main</span>></span>main<span><span></main</span>></span>
</span>  <span><span><span><footer</span>></span>footer<span><span></footer</span>></span>
</span><span><span><span></div</span>></span>
</span>

Das Ergebnis ist in der folgenden Codepen -Demo gezeigt.

Siehe die Grundlagen des Stifts
cs

Das Div erscheint über dem Bild, einfach weil es in der Quellreihenfolge nach dem Bild kommt. Wir k?nnen das Element ?ndern, das über den anderen erscheint, indem wir Z-Index anwenden. Versuchen Sie beispielsweise, einen Z-Index von 2 auf das Bild im obigen Stift festzulegen. Es wird nun einen Teil der Div.

Weiteres Lesen:

Erfahren Sie mehr über die Z-Index-Eigenschaft.
einpacken

-Mübe, die Sie über das Netz lernen k?nnen.

Gitter gegen Flexbox Eine ewige Frage ist, ob wir Raster oder Flexbox verwenden sollten. Es ist wahr, dass es einige überlappungen zwischen den beiden Layout -Tools gibt. Oft lohnt es sich, ein paar Tests durchzuführen, um zu sehen, welche in jedem bestimmten Szenario das bessere Toolkit aufweist.

Flexbox wurde haupts?chlich zum Auslegen von Elementen in eine einzelne Richtung entwickelt (auch wenn diese Elemente über Linien wickeln).

Grid ist zum Auslegen von Elementen in zwei Richtungen ausgelegt, damit sie sowohl horizontal als auch vertikal ausgerichtet sind.
• Aus diesem Grund ist Grid im Allgemeinen eine bessere Option für ganzseitige Layouts, w?hrend Flexbox besser ist, um Dinge wie Menüs auszusetzen.

Browserunterstützung für Gitter

Als wir diesen Artikel im Jahr 2016 zum ersten Mal ver?ffentlichten, war das Netz für Browser ziemlich neu und die Unterstützung war nicht universell. Heutzutage unterstützen alle gro?en Browser das Netz. Es wird immer noch einige ?ltere Browser geben, die es nicht unterstützen, aber in vielen F?llen zeigen diese Browser den Inhalt immer noch gut genug an. Ein sch?ner Catch-All-Ansatz besteht darin, mit einem einspaltigen Layout für mobile Ger?te zu beginnen, die als Fallback für Browser dienen k?nnen, die kein Gitterlayout unterstützen. Die Netzstile k?nnen über Medienabfragen für Browser hinzugefügt werden, die sie unterstützen - die auf breiteren Bildschirmen angezeigt werden.

Sie k?nnen den neuesten Browser -Support für das Netz auf Caniuse überprüfen.

Lernressourcen für Gitter

Schlie?lich enden wir mit einigen weiteren Lernressourcen. Viele tolle Leute haben Tutorials, Videos, Bücher und mehr über das Netz bereitgestellt. Hier sind nur einige:

• CSS Master, 3. Auflage , von Tiffany Brown, ist eine gro?artige Einführung in CSS mit ausführlicher Anleitung zur Verwendung von Raster und anderen Layoutmethoden.
• Die MDN -Gitterreferenz.
• Das Raster an der Beispielstelle von Rachel Andrew. (Tats?chlich hat Rachel Andrew viele unglaubliche Artikel, Tutorials, Videos und sogar ein Buch zum Gitterlayout und ist ein wichtiger Experte dafür. Googeln ?Rachel Andrew Grid“ wird Tonnen von gro?artigem Material zum Lernen für Gitter hervorrufen.)
• Die Layout -Land -YouTube -Serie von Jen Simmons. (Jen ist ein anderer Name, der es wert ist, gegoogelt zu werden.)
• Kevin Powell pr?sentiert viele fantastische Raster -Tutorials auf YouTube, die es wert sind, es zu überprüfen.
• CSS-Tricks bietet eine vollst?ndige Anleitung zum CSS-Netz, was eine sehr praktische Ressource ist.

FAQs über CSS -Gitterlayout

Was ist CSS-Gitterlayout? Es bietet eine flexiblere und effizientere M?glichkeit, Elemente in einem Raster zu entwerfen und zu positionieren. Netz; Eigenschaft in Ihrem CSS -Code. Dadurch wird der ausgew?hlte Beh?lter zu einem Rasterbeh?lter. Der Container wird mithilfe des Displays: Grid definiert; Eigenschaft und die Elemente sind die Elemente im Beh?lter.

Wie definiere ich Zeilen und Spalten in einem CSS-Gitter? -Rows, Grid-Template-S?ulen oder Verwenden der Kurzform-Eigenschaft-Gitter-Template. Spaltenbreiten und Zeilenh?hen durch Verwendung verschiedener Werte in Ihrer Gitter-Template-Definition, z.

Kann ich Gitter in Gitter nisten? Kann ich die Netze an verschiedene Bildschirmgr??en anpassen lassen? Sie k?nnen Medienabfragen, Prozents?tze oder relative Einheiten verwenden, um Ihr Netzlayout an verschiedene Bildschirmgr??en und -ger?te anzupassen.