Grid Lines
Gitterlinien werden erstellt, sobald Sie ein CSS-Grid-Layout verwenden.
Beispiel
Im folgenden Beispiel gibt es ein Raster mit drei Spalten-Tracks und zwei Zeilen-Tracks. Dies ergibt 4 Spaltenlinien und 3 Zeilenlinien.
<div class="wrapper">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
</div>
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 100px 100px;
}
Linien können mit ihrer Liniennummer adressiert werden. In einer von links nach rechts verlaufenden Sprache wie Englisch befindet sich die Spaltenlinie 1 auf der linken Seite des Rasters, die Zeilenlinie 1 oben. Die Linienneummern respektieren den Schreibmodus des Dokuments, und so befindet sich in einer von rechts nach links verlaufenden Sprache z. B. die Spaltenlinie 1 auf der rechten Seite des Rasters. Das Bild unten zeigt die Linienneummern des Rasters, vorausgesetzt, die Sprache verläuft von links nach rechts.
Linien werden auch im impliziten Raster erstellt, wenn implizite Tracks erstellt werden, um Inhalte außerhalb des expliziten Rasters unterzubringen, jedoch können diese Linien nicht durch eine Nummer adressiert werden.
Platzieren von Elementen auf dem Raster nach Liniennummer
Nachdem Sie ein Raster erstellt haben, können Sie Elemente anhand von Liniennummern auf diesem platzieren. Im folgenden Beispiel wird das Element von Spaltenlinie 1 bis Spaltenlinie 3 und von Zeilenlinie 1 bis Zeilenlinie 3 positioniert.
<div class="wrapper">
<div class="item">Item</div>
</div>
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 100px 100px;
}
.item {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 3;
}
Benennen von Linien
Die Linien, die im expliziten Raster erstellt werden, können benannt werden, indem der Name in eckigen Klammern vor oder nach der Angabe der Track-Größe gesetzt wird. Beim Platzieren eines Elements können Sie dann diese Namen anstelle der Liniennummer verwenden, wie unten demonstriert.
<div class="wrapper">
<div class="item">Item</div>
</div>
.wrapper {
display: grid;
grid-template-columns: [col1-start] 1fr [col2-start] 1fr [col3-start] 1fr [cols-end];
grid-template-rows: [row1-start] 100px [row2-start] 100px [rows-end];
}
.item {
grid-column-start: col1-start;
grid-column-end: col3-start;
grid-row-start: row1-start;
grid-row-end: rows-end;
}