Einführung in das CSS-Rasterlayout-Modul

Es war einmal Tische, dann Margen und Schwimmer, dann Flexbox und nun Gitter: CSS orientierte sich immer an neuen und besseren Wegen, die uralte Arbeit von zu erleichtern Kodieren von Weblayouts. Das CSS-Rasterlayoutmodell kann das Layout erstellen und aktualisieren entlang zweier Achsen: horizontal und vertikal, sowohl die Breite als auch die Höhe beeinflussen von Elementen.

Das Rasterlayout hängt nicht von der Position der Elemente im Markup ab. Daher können Sie dies mischen Sie die Platzierungen der Elemente im Markup, ohne das Layout zu ändern. Im Rastermodell ist ein Gittercontainerelement in Rasterspalten und -zeilen unterteilt (gemeinsam als Gitterspuren) durch Gitterlinien. Nun wollen wir mal sehen, wie es geht Erstellen Sie ein Mustergitter.

Browser-Unterstützung

Zum Zeitpunkt der Erstellung dieses Artikels wird das CSS-Grid-Modul nur vom neuesten IE-Browser und Edge unterstützt. Das CSS-Grid ist im experimentellen Stadium in den anderen großen Browsern, in denen Sie müssen Aktivieren Sie die Unterstützung manuell:

• Feuerfuchs: Drücken Sie die Umschalttaste + F2, Geben Sie den folgenden Befehl ein in die GCLI-Eingabeleiste unten im Browser: pref set layout.css.grid.enabled true.
• Chrom: Durchsuchen Sie die Chrom: // Flaggen URL und aktivieren Experimentelle Webplattform-Funktionen.

Alle wichtigen Browser-Unterstützung ist wahrscheinlich Kommen Sie bis Anfang / Mitte 2017.

Ein Beispielraster

Zu Verwandeln Sie ein Element in einen Gittercontainer Sie können verwenden einer von diesen drei Anzeige Eigenschaften:

1. Anzeige: Raster; - das Element ist in einen Blockraster-Container umgewandelt
2. Anzeige: Inline-Raster; - das Element ist in einen Inline-Grid-Container umgewandelt
3. Anzeige: Subgrid; - Wenn das Element ein Gitterelement ist, ist es dies in ein Teilgitter konvertiert Dadurch werden die Eigenschaften der Rastervorlage und der Gitterlücke ignoriert

So wie eine Tabelle aus mehreren Tabellenzellen besteht, ist dies ein Raster bestehend aus mehreren Gitterzellen. Ein Rasterelement ist einem Satz von Gitterzellen zugewiesen das ist kollektiv bekannt als Netzfläche.

Wir werden schaffen ein Raster mit fünf Abschnitten (Rasterflächen): oben, unten, links, rechts und zentriert. Das HTML besteht aus fünf divs in einem container div.

 
 
oben
 
Links
 
Center
 
Recht
 
Unterseite
 
 

In der CSS ist das Raster-Vorlagenbereiche Eigentum Definiert ein Gitter mit unterschiedlichen Gitterbereichen. In seinem Wert, Ein String steht für eine Rasterzeile und Jeder gültige Name innerhalb einer Zeichenfolge steht für eine Spalte. Zu Erstellen Sie eine leere Gitterzelle Sie müssen das verwenden Punkt (.) Zeichen innerhalb einer Reihe.

Das Namen der Gitterbereiche sind vom zu referenzieren Netzfläche Eigenschaft der einzelnen Gitterelemente.

 .Gittercontainer Breite: 500px; Höhe: 500px; Anzeige: Raster; Raster-Vorlagen-Bereiche: "oben oben" "links Mitte rechts" "unten unten unten";  .grid-top grid-area: top;  .grid-bottom grid-area: bottom;  .grid-left grid-area: left;  .grid-right grid-area: right;  .grid-center grid-area: center;  

Dieser Code erstellt also ein Gitter mit drei Zeilen und Spalten. Das oben Artikel nimmt einen Bereich ein, der sich erstreckt drei Spalten in der ersten Reihe und das Unterseite Artikel erstreckt sich über drei Spalten in der letzten Zeile. Jedes von den links, Center und Recht Artikel dauert eine Spalte in der mittleren Reihe.

Jetzt müssen wir Dimensionen zuweisen zu diesen Zeilen und Spalten. Das Raster-Vorlage-Spalten und Raster-Vorlage-Zeilen Eigenschaften Definieren Sie die Größe der Gitterspur (Zeile oder Spalte).

 .Gittercontainer Breite: 500px; Höhe: 500px; Anzeige: Raster; Raster-Vorlagen-Bereiche: "oben oben" "links Mitte rechts" "unten unten unten"; Rastervorlagen-Spalten: 100px Auto 100px; Raster-Vorlage-Zeilen: 50px Auto 150px;  

So sieht unser CSS-Raster jetzt aus (mit einigen zusätzlichen Stilen):

Abstand zwischen den Gitterelementen

Du kannst hinzufügen Leerzeichen zwischen Spalten und Zeilen mit Gitter-Spalte-Lücke und Rasterzeilenlücke, oder ihr langjähriges Eigentum Netzlücke.

 .Gittercontainer Breite: 500px; Höhe: 500px; Anzeige: Raster; Raster-Vorlagen-Bereiche: "oben oben" "links Mitte rechts" "unten unten unten"; Rastervorlagen-Spalten: 100px Auto 100px; Raster-Vorlage-Zeilen: 50px Auto 150px; Gitterlücke: 5px 5px;  

Unten sehen Sie das Netzlücke Die Eigenschaft fügte tatsächlich Lücken zwischen den Gitterelementen hinzu.

Richten Sie den Inhalt und die Elemente des Rasters aus

Das Inhalt rechtfertigen Eigenschaft des Gittercontainers (.Gittercontainer) richtet den Inhalt des Gitters aus entlang der Inline-Achse (horizontale Achse) und die Eigenschaft Inhalt ausrichten, richtet den Inhalt eines Gitters aus entlang der Blockachse (vertikale Achse). Beide Eigenschaften kann einen dieser Werte haben: Start, Ende, Center, Raum zwischen, Raum um und Platz-gleichmäßig.

Gegebenenfalls die Spurgröße (Zeile oder Spalte) schrumpft, um zum Inhalt zu passen wenn ausgerichtet. Schauen Sie sich die Screenshots der Rasterinhalte an mit verschiedenen Werten ausgerichtet unten.

Rechtfertigen-Inhalt: Start;

Rechtfertigungsinhalt: Ende;

Inhalt rechtfertigen: Mitte;

Begründungsinhalt: Leerzeichen;

Rechtfertigungsinhalt: Leerzeichen;

Rechtfertigungsinhalt: Leerzeichen;

Align-Inhalt: Start;

Align-Inhalt: Ende;

Inhalt ausrichten: zentrieren;

Ausrichtungsinhalt: Abstand zwischen;

Inhalt ausrichten: Leerzeichen;

Ausrichtungsinhalt: Platz-gleichmäßig;

Beide Inhalt rechtfertigen und Inhalt ausrichten Eigenschaften Richten Sie den gesamten Inhalt innerhalb eines Rasters aus.

Zu Einzelne Elemente innerhalb ihrer Gitterbereiche ausrichten, benutze die anderes Paar von Ausrichtungseigenschaften: Rechtfertigungsartikel und ausrichten. Beide können einen dieser Werte annehmen: Start, Ende, Center, Grundlinie (Elemente an der Basisrasterlinie des Bereichs ausrichten) und strecken (Artikel füllen ihre gesamte Fläche aus).