Raster-Vorlagen-Spalten / Raster-Vorlagen-Zeilen - CSS-Tricks

Die Eigenschaften grid-template-rowsund grid-template-columnssind die primären CSS-Eigenschaften zum Erstellen eines Rasterlayouts, sobald das Element ein Rasterkontext ist ( display: grid;).

Es gibt auch -ms-grid-columnsund -ms-grid-rows, die die alte IE-Version davon sind. Möglicherweise möchten Sie Autoprefixing in Betracht ziehen, um Ihren Anruf zu erhalten, oder nicht. Es gab auch eine seltsame Zeit, in der sie waren grid-definition-columnsund grid-definition-rows, aber das ist keine Sache mehr.

Hier ist ein Beispiel aus der Microsoft-Dokumentation:

.grid ( display: grid; grid-template-columns: auto 100px 1fr 2fr; grid-template-rows: 50px 5em min-content auto; )

Dies definiert die Anzahl der Zeilen / Spalten im Raster sowie deren Dimension.

Diese beiden Eigenschaften unterstützen eine Liste von Werten, die durch Leerzeichen getrennt sind. Jeder Wert definiert eine neue Spalte / Zeile durch Festlegen einer Dimension. Eine Liste mit 4 Werten führt zu 4 Spalten / Zeilen. Ein einzelner Wert erzeugt eine einzelne Spalte / Zeile.

Akzeptierte Werte umfassen Länge (wie pxoder em), Prozentsatz, Anteile ( frsiehe unten), auto(oder fit-content), min-content, max-content, und minmax(), oder die repeat()Funktion.

Im obigen Codebeispiel bedeutet dies:

Spalte 1 ( Auto- Schlüsselwort): Die Spalte wird an den Inhalt der Spalte angepasst.
Spalte 2 ("100px"): Die Spalte ist 100 Pixel breit.
Spalte 3 („1fr“): Die Spalte nimmt einen Bruchteil des verbleibenden Platzes ein.
Spalte 4 („2fr“): Die Spalte nimmt zwei Bruchteilseinheiten des verbleibenden Platzes ein.

Zeile 1 („50px“): Die Zeile ist 50 Pixel hoch.
Reihe 2 ("5em"): Reihe ist 5 ems groß.
Zeile 3 ( Schlüsselwort min-content ): Die Zeile ist so klein, wie es der Inhalt zulässt.
Zeile 4 ( Auto- Schlüsselwort): Die Zeile wird an den Inhalt der Zeile angepasst.

wiederholen()

Die repeat()Funktion wurde speziell für dieses Modul entwickelt. Hier können Sie ein Muster definieren, das X-mal wiederholt wird. Wie repeat(6, 1fr);. Angenommen, Sie möchten 12 gleich breite Spalten mit einem Abstand von 1% voneinander erstellen. Sie könnten definieren 1fr repeat(11, 1% 1fr). Es ist das gleiche wie 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr.

Die fr Einheit

Das frGerät kann für grid-rowsund grid-columnsWerte verwendet werden. Es steht für "Bruchteil des verfügbaren Platzes". Stellen Sie sich das als Prozentsatz für den verfügbaren Speicherplatz vor, wenn Sie Spalten und Zeilen mit fester Größe und Inhalt entfernt haben. Wie die Spezifikation sagt:

Die Verteilung des gebrochenen Raums erfolgt, nachdem alle "Länge" oder inhaltsbasierten Zeilen- und Spaltengrößen ihr Maximum erreicht haben.

verbunden

Unsere beste Ressource für CSS-Grids ist unser vollständiger Leitfaden für CSS-Grids.

Browser-Unterstützung

Diese Browser-Unterstützungsdaten stammen von Caniuse, das detaillierter ist. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.