DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!
Die Eigenschaften grid-row und grid-column definieren, auf welcher Zeile oder Spalte ein Element angezeigt wird.
.element {
grid-row: 1 / 2;
grid-column: 3 / -1;
}Hier ist ein explizites 3 × 3 Gitter, bei dem diese Eigenschaften verwendet werden, um Gitterelemente an bestimmten Stellen zu platzieren.
Browser-Unterstützung
Diese Browser-Unterstützungsdaten stammen von Caniuse, die weitere Details enthält. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version und höher unterstützt.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 57 | 52 | 11* | 16 | 10.1 |
Mobil / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 127 | 127 | 127 | 10.3 |
Weitere Informationen
Verwandt
column-gap
.example { column-gap: 25px; }
gap
.element { gap: 20px 30px; }
Grid
.element { grid: auto-flow dense / repeat(5, 150px); }
grid-auto-columns
.element { grid-auto-columns: minmax(100px, 200px); }
grid-column
.element { grid-column: 3 / 5; }
grid-column-end
.element { grid-column-end: 4; }
grid-column-start
.element { grid-column-start: 3; }
row-gap
.element { row-gap: 2rem; }