Rasterlinien
Rasterlinien werden erstellt, wenn Sie ein CSS-Rasterlayout verwenden.
Beispiel
Im folgenden Beispiel gibt es ein Raster mit drei Spalten- und zwei Zeilenstrecken. 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 anhand ihrer Zeilennummer 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 Zeilennummern entsprechen dem Schreibmodus des Dokuments, sodass in einer von rechts nach links verlaufenden Sprache beispielsweise die Spaltenlinie 1 rechts vom Raster liegt. Das untenstehende Bild zeigt die Zeilennummern des Rasters, wobei angenommen wird, dass die Sprache von links nach rechts verläuft.
Linien werden auch im impliziten Raster erstellt, wenn implizite Strecken erstellt werden, um Inhalte außerhalb des expliziten Rasters zu halten, jedoch können diese Linien nicht anhand einer Nummer angesprochen werden.
Platzieren von Elementen auf dem Raster anhand der Zeilennummer
Nachdem Sie ein Raster erstellt haben, können Sie Elemente anhand der Zeilennummer auf dem Raster platzieren. Im folgenden Beispiel wird das Element von der Spaltenlinie 1 bis zur Spaltenlinie 3 und von der Zeilenlinie 1 bis zur 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 Sie den Namen in eckigen Klammern vor oder nach den Information zur Streckengröße hinzufügen. Beim Platzieren eines Elements können Sie dann diese Namen anstelle der Zeilennummer 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;
}