4.1 Eigenschaft grid-column
CSS Grid Layout bietet großartige Werkzeuge zur Verwaltung der Platzierung von Elementen im Gitter. Zu den Hauptinstrumenten gehören die Eigenschaften grid-row und grid-column. Diese Eigenschaften ermöglichen es Entwicklern, genau anzugeben, welche Reihen und Spalten von Grid-Elementen belegt werden sollen, was Flexibilität und Kontrolle über das Layout bietet.
Die Eigenschaft grid-column bestimmt, welche Spalten ein Element innerhalb des Grid-Containers belegen wird.
Syntax:
.grid-item {
grid-column: start / end;
}
Wo:
start: der Start des Gitterlinienend: der Endpunkt des Gitterlinien
Beispiel 1: Platzierung eines Elements in einer bestimmten Spalte
In diesem Beispiel wird das Element zwischen der zweiten und der dritten Gitterlinie platziert, wobei die zweite Spalte eingenommen wird:
.grid-item {
grid-column: 2 / 3; /* Das Element nimmt den Raum zwischen der zweiten und der dritten Gitterlinie ein */
}
Beispiel 2: Ein Element, das mehrere Spalten einnimmt
In diesem Beispiel wird das Element drei Spalten belegen, beginnend mit der ersten Linie und endend mit der vierten Gitterlinie:
.grid-item {
grid-column: 1 / 4; /* Das Element nimmt den Raum von der ersten bis zur vierten Gitterlinie ein */
}
Beispiel 3: Verwendung von span zur Abdeckung mehrerer Spalten
In diesem Beispiel wird das Element zwei Spalten einnehmen, beginnend von der aktuellen Position:
.grid-item {
grid-column: span 2; /* Das Element nimmt zwei Spalten ein, beginnend von der aktuellen Position */
}
4.2 Eigenschaft grid-row
Die Eigenschaft grid-row bestimmt, welche Reihen ein Element innerhalb des Grid-Containers belegen wird.
Syntax:
.grid-item {
grid-row: start / end;
}
Wo:
start: der Startpunkt der Gitterlinieend: der Endpunkt der Gitterlinie
Beispiel 1: Platzierung eines Elements in einer bestimmten Zeile
In diesem Beispiel wird das Element zwischen der ersten und der zweiten Gitterlinie platziert, wobei die erste Zeile eingenommen wird:
.grid-item {
grid-row: 1 / 2; /* Das Element nimmt den Raum zwischen der ersten und der zweiten Gitterlinie ein */
}
Beispiel 2: Ein Element, das mehrere Zeilen einnimmt
In diesem Beispiel wird das Element zwei Zeilen belegen, beginnend mit der zweiten Linie und endend mit der vierten Gitterlinie:
.grid-item {
grid-row: 2 / 4; /* Das Element nimmt den Raum von der zweiten bis zur vierten Gitterlinie ein */
}
Beispiel 3: Verwendung von span zur Abdeckung mehrerer Zeilen
In diesem Beispiel wird das Element drei Zeilen einnehmen, beginnend von der aktuellen Position:
.grid-item {
grid-row: span 3; /* Das Element nimmt drei Zeilen ein, beginnend von der aktuellen Position */
}
Beispiel 4. Verwendung negativer Werte
.element {
grid-row: 1 / -1; /* Das Element beginnt bei der ersten Linie und endet bei der letzten */
}
4.3 Kombinieren der Eigenschaften grid-row und grid-column
Um komplexere Layouts zu erstellen, kann man die Eigenschaften grid-row und grid-column kombinieren, um die Platzierung der Elemente genau zu steuern.
Beispiel: Komplexes Layout mit grid-row und grid-column
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Row and Column Example</title>
<style>
.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 100px);
gap: 10px;
}
.item1 {
background-color: lightblue;
grid-row: 1 / 3; /* Das Element nimmt die erste und zweite Zeile ein */
grid-column: 1 / 3; /* Das Element nimmt die erste und zweite Spalte ein */
}
.item2 {
background-color: lightgreen;
grid-row: 3 / 5; /* Das Element nimmt die dritte und vierte Zeile ein */
grid-column: 2 / 5; /* Das Element nimmt die zweite, dritte und vierte Spalte ein */
}
.item3 {
background-color: lightcoral;
grid-row: 1 / 2; /* Das Element nimmt die erste Zeile ein */
grid-column: 3 / 5; /* Das Element nimmt die dritte und vierte Spalte ein */
}
</style>
</head>
<body>
<div class="container">
<div class="item1">Item 1</div>
<div class="item2">Item 2</div>
<div class="item3">Item 3</div>
</div>
</body>
</html>
Erklärung:
- Der Container
.containerhat vier Zeilen und vier Spalten, die alle den gleichen Platz einnehmen - Das Element
.item1nimmt die ersten beiden Zeilen und die ersten beiden Spalten ein - Das Element
.item2nimmt die dritte und vierte Zeilen und die zweite, dritte und vierte Spalten ein - Das Element
.item3nimmt die erste Zeile und die dritte und vierte Spalten ein
GO TO FULL VERSION