Geheimnisse des CSS-Grid-Layouts enthüllt
CSS Grid Layout wurde im März 2017 in Browsern eingeführt und zum Zeitpunkt des Schreibens werden weit über 70 Prozent der Besucher der meisten Websites davon betroffen sein Netzunterstützung . Diese Zahl wächst schnell und wird sich verbessern, wenn Edge seine aktualisierte Unterstützung ausliefert.
Ich hoffe, dass Sie bereits Gelegenheit hatten, einige der Funktionen von CSS Grid Layout kennenzulernen. In diesem Artikel werden einige der Funktionen vorgestellt, die Sie möglicherweise übersehen haben. Ich werde auch einige Dinge betrachten, die in zukünftigen Ebenen der Spezifikation kommen könnten.
01. Die Funktion minmax ()
Im Gegensatz zu anderen Layoutmethoden, bei denen die Größe des Elements selbst festgelegt werden muss, legen wir im Rasterlayout die Größe auf Containerebene fest. Wir definieren Spuren, die Gitterzellen erstellen, in die Inhalte eingefügt werden können.
Um dies auf flexible Weise zu tun und Inhalte zu berücksichtigen, die kleiner oder größer als das erwartete Design sein können, bringt Grid neue Funktionen in CSS. Eines davon ist das Minimal Maximal() Funktion. Mit dieser Funktion können Sie eine minimale und eine maximale Größe für eine Spur angeben.
Im folgenden Beispiel habe ich ein ordentliches Bedienfeld mit einer Überschrift oben links und einem großen Bild rechts. Ich möchte, dass die oberste Zeile mindestens 150 Pixel hoch ist, unabhängig davon, wie viele Zeilen die Überschrift oder andere Inhalte benötigen.
Wenn jedoch mehr Inhaltszeilen vorhanden sind oder der Text größer ist, soll das Feld größer als 150 Pixel werden. Hier benutze ich Minimal Maximal() Stellen Sie eine Mindestgröße von 150 Pixel und ein Maximum von Auto ein.
.grid { display: grid; grid-template-columns: 1.2fr 1fr; grid-template-rows: minmax(150px, auto) minmax(300px,auto); } 
Durch die Nutzung Minimal Maximal() Wenn wir nur die Überschrift in diesem Feld haben, ist das Feld größer als der erforderliche Platz. Wenn wir eine längere Überschrift und zusätzlichen Text haben, wird dieser erweitert, um Platz zu schaffen.
02. Auto-Fill und Auto-Fit
Flexbox ermöglicht viele reaktionsschnelle Entwurfsmuster, ohne dass wir uns auf Medienabfragen stützen müssen. Das Raster geht jedoch noch einen Schritt weiter und ermöglicht flexible Entwurfsmuster mit Elementen, die in zwei Dimensionen angeordnet sind: nach Zeile und nach Spalte. Ein nützliches Muster besteht darin, so viele Spalten zu haben, wie in einen Container passen. Dazu verwenden wir zwei neue Schlüsselwörter: automatisch ausfüllen und Auto-Fit .
Um so viele 200-Pixel-Spaltenspuren zu haben, wie in einen Container passen, verwenden Sie eine Spurliste von:
.grid1 { display: grid; grid-template-columns: repeat(auto-fill, 200px); }Um diese Spalten flexibel zu gestalten, aber ein Minimum von 200 Pixel beizubehalten, bringen Sie die Minimal Maximal() Funktion, die ich im vorherigen Tipp beschrieben habe. Wir können Spalten mit mindestens 200 Pixel und maximal 1 Fr erstellen. Nachdem der Browser herausgefunden hat, wie viele 200-Pixel-Spalten passen, weist er den verbleibenden Platz gleichmäßig zwischen unseren Spalten zu.
.grid1 { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, auto)); } 
Ich habe das benutzt automatisch ausfüllen Schlüsselwort hier; Dadurch bleibt Platz für Tracks, auch wenn für sie kein Inhalt vorhanden ist. Wenn Sie stattdessen verwenden Auto-Fit Alle vollständig leeren Spuren werden reduziert und ihr Platz den anderen Spuren zugewiesen.
03. Dichter Verpackungsmodus
Wenn Sie erklären Anzeige: Gitter Auf einem Element werden alle direkten untergeordneten Elemente zu Rasterelementen, und die Elemente werden automatisch in diesem Raster angeordnet. Dies geschieht basierend auf den Regeln für die automatische Platzierung, die in der Spezifikation definiert sind.
Wenn sich einige Ihrer Elemente über Spuren erstrecken und dies bedeutet, dass Elemente nicht in eine verfügbare Spur passen, wird eine neue Zeile im Raster erstellt. Standardmäßig wird das Raster weitergeleitet und Ihre Elemente werden in der Reihenfolge angezeigt, in der sie in der Quelle angezeigt werden.
Wenn Sie jedoch den Wert von festlegen Grid-Auto-Flow zu dicht Nach dem Verlassen dieser Lücken beginnt Grid mit dem Zurückverfolgen. Wenn ein Element gefunden wird, das in eine bereits verbleibende Lücke passt, nimmt es es auf und platziert es außerhalb der Quellreihenfolge in der Lücke.
.grid { display: grid; grid-auto-flow: dense; grid-template-columns: repeat(auto-fill,minmax(200px, 1fr)); } 
Dieses Verhalten ist nützlich, wenn die angezeigten Elemente keine logische Reihenfolge haben. Sie können jedoch ein Layout für Personen, die mit der Tastatur navigieren, leicht erschweren, wenn sie von Element zu Element wechseln. Verwenden Sie diese Funktion mit großer Sorgfalt und Prüfung!
04. Magische Linien und magische Bereiche
Wenn Sie die Methode zum Erstellen von Inhalten mit der Methode 'Rastervorlagenbereiche' verwenden, erstellen Sie einen benannten Bereich in Ihrem Raster. Dadurch wird eine Reihe benannter Zeilen für Zeilen und Spalten erstellt, die den Bereichsnamen mit verwenden -Start und -Ende angehängt. In diesem nächsten Beispiel habe ich die benannten Linien verwendet, die durch Positionieren meiner Gitterbereiche erstellt wurden, um eine Überlagerung zu positionieren.
.grid { display: grid; grid-template-columns: 1fr 2fr 1fr; grid-auto-rows: minmax(100px, auto); grid-template-areas: 'sd1 content sd2' 'sd1 footer sd2'; } .side1 { grid-area: sd1; } .side2 { grid-area: sd2; } .content { grid-area: content; } .footer { grid-area: footer; } .grid .overlay { grid-column: sd1-start / sd2-end; grid-row: content-start / footer-end; }Dies funktioniert umgekehrt, wenn Sie benannte Gitterlinien verwenden. Wenn Sie Zeilen benennen, die mit enden -Start und -Ende Für Spalten und Zeilen erstellen Sie einen benannten Bereich mit dem verwendeten Hauptnamen.
Ein durch die Linien definierter Bereich Inhaltsstart und Inhaltsende für Zeilen und Spalten hätte der Name Inhalt. Sie können einen Gegenstand in diesen Bereich mit platzieren Gitterbereich: Inhalt .
05. Standardausrichtung
Wenn ein Element zu einem Rasterelement wird, erstreckt sich das Standardverhalten über seinen Rasterbereich. es sei denn, der Gegenstand ist etwas mit einem intrinsischen Seitenverhältnis. Wenn das Element ein Seitenverhältnis hat, wird es sowohl in Zeilen- als auch in Spaltenrichtung an der Startlinie ausgerichtet. Dies bedeutet, dass das Raster Ihre Bilder standardmäßig nicht überproportional streckt, obwohl Sie dies natürlich tun können, wenn Sie das Ausrichtungsverhalten ändern möchten.
06. Fallbacks
In die CSS-Grid-Spezifikation sind die Details geschrieben, wie das CSS-Grid-Layout andere Layoutmethoden überschreibt. Wenn Sie einen Artikel haben, der schwebt, verwendet Anzeige: Tabelle oder Anzeige: Inline-Block und wird dann zu einem Rasterelement, erklärt die Spezifikation, was passieren wird.
Kurz gesagt, wenn ein Element zu einem Rasterelement wird, finden Sie:
- Wenn es schwebend ist oder die Eigenschaft clear verwendet, wirken sich diese Eigenschaften nicht mehr auf das Element aus.
- Wenn es Anzeige hat: Inline-Block oder verwendet eine Tabelleneigenschaft wie Anzeige: Tabellenzelle diese gelten nicht mehr.
- Bei Tabelleneigenschaften anonyme Felder, die bei Verwendung generiert werden Anzeige: Tabellenzelle ohne übergeordnete Tabelle werden nicht mehr erstellt.
- vertikal ausrichten gilt nicht mehr.
Ich habe ein Cheatsheet erstellt, in dem diese Überschreibungen anhand von Beispielen aufgeführt sind. Sie können das finden auf meiner Seite.
Wenn Sie sich in vielen Fällen auf dieses übergeordnete Verhalten verlassen, müssen Sie darauf achten, dass die Breite für Elemente festgelegt wird, die später zu Rasterelementen werden. In früheren Layoutmethoden steuern wir die Breite eines Elements auf dem Element.
Mit Grid platzieren wir das Element in einer Grid-Zelle, die es einschränkt. Dies bedeutet, dass bei einem Element mit einer festgelegten prozentualen Breite diese Breite in einen Prozentsatz der Rasterfläche aufgelöst wird, sobald das Element zu einem Rasterelement wird.
Die Lösung hierfür ist eine weitere CSS-Spezifikation: Feature-Abfragen. Wir können eine Feature-Abfrage verwenden, um die Unterstützung für das Rasterlayout zu testen. Wenn der Browser Grid unterstützt, setze ich die Breite auf auto.
.grid > div { float: left; width: 33.333%; } @supports (display: grid) { .grid > div { width: auto; } }07. Dimensionierung mit Min-Inhalt und Max-Inhalt
Die Spezifikation des CSS Intrinsic & Extrinsic Sizing Module Level 3 definiert zusätzliche Schlüsselwörter für die Größenbestimmung. Diese Schlüsselwörter umfassen Min-Inhalt und max-content , mit dem Sie die Größe in Ihren Rasterspuren definieren können.
Als sehr einfaches Beispiel habe ich ein zweispaltiges Spurraster erstellt. Eine Spalte ist definiert als Min-Inhalt Größe, die zweite Spalte max-content . Der erste Titel ist nur so groß wie erforderlich, um ein einzelnes Wort des Inhalts anzuzeigen - dies ist die Mindestgröße, die dieser Titel haben kann. Die zweite Option wird erweitert, damit die gesamte Zeile angezeigt werden kann. Dies kann zu Überläufen führen, die Sie verwalten und bearbeiten müssen.
.grid { display: grid; grid-template-columns: min-content max-content; } 
Level 2 Funktionen
Die Grid-Spezifikation befindet sich jetzt im Status 'Kandidatenempfehlung'. Dies bedeutet, dass wir hoffen, keine wesentlichen Änderungen an der Spezifikation vorzunehmen. Stattdessen geht es zu einer Phase über, in der wir nach mindestens zwei Implementierungen für jedes Feature suchen. Dies stellt sicher, dass die Spezifikation sinnvoll ist und von Browsern implementiert werden kann.
Für Grid sind jedoch noch einige Dinge im Gange, und im Rest dieses Artikels werden wir uns mit einer kürzlich vorgenommenen Änderung der Level 1-Spezifikation und einigen Dingen befassen, auf die wir uns in Level 2 möglicherweise freuen müssen.
08. Lücken ändern sich
Das Gitterlücke Kurzschrift plus die Langhand Gitter-Spalten-Lücke und Gitterreihenlücke Die Eigenschaften wurden während der Sitzung der CSS-Arbeitsgruppe im August 2017 geändert Spalt , Spaltenlücke und Reihenlücke . Sie wurden auch verschoben, um ihre Definitionen in der Box Alignment-Spezifikation zu haben.
Dies ist die Spezifikation, die die netten Ausrichtungsfunktionen von Flexbox übernommen und erweitert hat, damit sie auch in Grid verwendet werden können - und möglicherweise auch in anderen Layoutmethoden.
Wenn Sie die Lückenmerkmale in die Box-Ausrichtungsspezifikation aufnehmen und allgemeiner benennen, können sie in anderen Layouttypen verwendet werden, in denen sie sinnvoll sind. Der naheliegende Ort, an dem sie sinnvoll sind, ist Flexbox.
Diese Umbenennung bedeutet, dass wir letztendlich die richtigen Lücken in Flexbox bekommen. kein Herumspielen mehr mit Rändern. Browser aliasen die alten Namen mit den neuen. Wenn Sie also bereits Lücken im Rasterlayout verwendet haben, wird dieser Code nicht unterbrochen. Möglicherweise möchten Sie jedoch auch beide Eigenschaften selbst hinzufügen. Browser ignorieren den, den sie nicht unterstützen.
09. Gitter ist kein Mauerwerk
Wenn Leute zum ersten Mal den dichten Verpackungsmodus sehen, den ich weiter oben in diesem Artikel demonstriert habe, denken sie oft, dass Grid das Layoutmuster für Mauerwerk ausführen kann. Mauerwerk ist jedoch eine völlig andere Art von Layout. Ein Standard-Mauerwerkslayout ist kein striktes Raster, sodass dieses Muster irgendwo zwischen dem liegt, was Flexbox kann, und dem, was Raster tut.
In der CSS-Arbeitsgruppe denken wir jedoch über dieses Problem nach. Wir wissen, dass Entwickler dies wirklich wollen. Die Diskussion finden Sie in der CSS WG entwirft Repository drüben auf GitHub und füge sogar deine Gedanken hinzu.
10. Gitterbereichspseudoelemente
Eine weitere häufige Funktionsanforderung für das Rasterlayout ist die Möglichkeit, die Rasterzellen oder -bereiche zu formatieren, ohne dass ein Element zum Formatieren eingefügt werden muss. Um einem Bereich Rahmen hinzuzufügen, müssten Sie derzeit ein leeres Element zu Ihrem Markup hinzufügen oder generierten Inhalt verwenden, um ein Rasterelement zu erstellen, das gestaltet werden kann.
Es gibt ein Problem in Bezug auf die Überlegung, eine Art Pseudoelement für Gitterbereiche hinzuzufügen. Dies würde Ihnen folglich etwas zum Zielen geben, wenn Sie einem bestimmten Bereich Hintergründe oder Rahmen hinzufügen möchten, ohne zusätzliche Markups hinzuzufügen oder generierten Inhalt zu verwenden.
Dieser Artikel erschien ursprünglich in Ausgabe 298 von Netzmagazin , das Magazin für professionelle Webdesigner und -entwickler - mit den neuesten Webtrends, -technologien und -techniken. Ausgabe 298 hier kaufen oder Abonnieren Sie net hier .
Mochte dies? Lese das!
- Erstellen Sie mit CSS Grid ein ansprechendes Layout
- Machen Sie sich mit CSS Grid auf dem Laufenden
- Eine Anleitung zum Schreiben von besserem CSS
