Beispiel
Im folgenden Beispiel gibt es ein Gitter mit drei Spuren in der Spalte und zwei Spuren in der Zeile. 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 Liniennummer angesprochen werden. In einer von links nach rechts verlaufenden Sprache wie Englisch befindet sich die Spaltenlinie 1 links vom Gitter, die Zeilenlinie 1 oben. Die Liniennummern folgen dem Schreibmodus des Dokuments, und daher befindet sich in einer von rechts nach links verlaufenden Sprache zum Beispiel die Spaltenlinie 1 rechts vom Gitter. Das unten stehende Bild zeigt die Liniennummern des Gitters, wobei davon ausgegangen wird, dass die Sprache von links nach rechts verläuft.
Linien werden auch im impliziten Gitter erstellt, wenn implizite Spuren erstellt werden, um Inhalte zu halten, die außerhalb des expliziten Gitters positioniert sind. Diese Linien können jedoch nicht durch eine Nummer angesprochen werden.
Platzieren von Elementen auf dem Gitter basierend auf der Liniennummer
Nach der Erstellung eines Gitters können Sie Elemente durch Liniennummern auf das Gitter platzieren. Im folgenden Beispiel ist 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;
}
Linien benennen
Die im expliziten Gitter erstellten Linien können benannt werden, indem der Name in eckige Klammern vor oder nach den Information zur Spurgröße hinzugefügt wird. Wenn Sie ein Element platzieren, 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;
}