CSS-Rasterspalten neu anordnen

Einführung

CSS Grid bietet ein flexibles Layoutsystem für Webinhalte, einschließlich der Möglichkeit, die Reihenfolge und Positionierung von zu steuern Spalten. Diese Frage befasst sich mit der Änderung der Spaltenreihenfolge innerhalb eines CSS-Rasters.

Grid-template-areas-Eigenschaft

Eine Methode zum Neuanordnen von Rasterspalten ist die Verwendung der Grid-template-areas-Eigenschaft. Dadurch können Sie bestimmte Bereiche innerhalb des Rasters definieren und diesen Bereichen Spalten zuweisen. Zum Beispiel:

.my-grid {
  grid-template-areas:
    "col3 col1"
    "col3 col2";
}

Dadurch wird das Element col3 an den Anfang der Zeile verschoben, gefolgt vom Element col1.

Zeilenbasierte Platzierung

Sie können auch die zeilenbasierte Platzierung verwenden um die Spaltenreihenfolge zu steuern. Dabei werden Rasterelemente nacheinander entlang der Rasterlinien platziert, wobei die Eigenschaften „grid-column-start“ und „grid-column-end“ die Start- und Endpositionen bestimmen.

Um beispielsweise die zu positionieren col3-Element nach dem col1-Element:

.col3 {
  grid-column-start: 2;
}

Order-Eigenschaft

Die Order-Eigenschaft legt die Reihenfolge der Rasterelemente innerhalb einer Spur fest. Bei Werten unter 0 wird das Element vor dem Titelanfang platziert, bei Werten über 0 wird es hinter dem Titelende platziert.

So verschieben Sie das col3-Element an die erste Position:

.col3 {
  order: -1;
}

Dense-Funktion

Die Dense-Funktion der Grid-Auto-Flow-Eigenschaft kann auch zum Neuanordnen von Rasterspalten verwendet werden. Es richtet Elemente im verfügbaren Platz aus, beginnend am Anfang des Rastercontainers, und überspringt alle leeren Rasterzellen.

So verschieben Sie das col3-Element an den Anfang der zweiten Zeile:

.my-grid {
  grid-auto-flow: dense 1fr;
}
.col3 {
  grid-column: 3;
  grid-row: 2;
}

Durch die Implementierung dieser Techniken können Sie Rasterspalten dynamisch neu anordnen, um die gewünschten Layoutanforderungen auf verschiedenen Bildschirmgrößen oder Geräteausrichtungen zu erfüllen.