Rasterlinien
Rasterlinien werden erzeugt, sobald Sie ein CSS-Rasterlayout verwenden.
Beispiel
Im folgenden Beispiel gibt es ein Raster mit drei Spalten-Spuren und zwei Zeilen-Spuren. 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 über ihre Liniennummer angesprochen werden. In einer von links nach rechts verlaufenden Sprache wie Englisch befindet sich die Spaltenlinie 1 links vom Raster, die Zeilenlinie 1 oben. Die Liniennummern respektieren den Schreibmodus des Dokuments, und so befindet sich in einer von rechts nach links verlaufenden Sprache beispielsweise die Spaltenlinie 1 rechts vom Raster. Das unten stehende Bild zeigt die Liniennummern des Rasters, wobei die Annahme besteht, dass die Sprache von links nach rechts verläuft.
Linien werden auch im impliziten Raster erstellt, wenn implizite Spuren erstellt werden, um Inhalte zu halten, die außerhalb des expliziten Rasters positioniert sind. Diese Linien können jedoch nicht über eine Nummer angesprochen werden.
Platzieren von Elementen auf dem Raster nach Liniennummer
Nachdem Sie ein Raster erstellt haben, können Sie Elemente auf dem Raster anhand der Liniennummer 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 im expliziten Raster erstellten Linien können benannt werden, indem der Name in eckigen Klammern vor oder nach den Informationen zur Spurgröße hinzugefügt wird. Wenn Sie ein Element platzieren, können Sie diese Namen anstelle der Liniennummer verwenden, wie unten gezeigt.
<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;
}