Wie kann ich Spalten in einem CSS-Rasterlayout neu anordnen?

Ändern der Spaltenreihenfolge in einem CSS-Raster

In CSS Grid können Sie das Layout eines Rasters definieren, indem Sie die Anzahl der Spalten und Zeilen mithilfe des Rasters angeben. template-columns- und Grid-template-rows-Eigenschaften. Allerdings kann es eine Herausforderung sein, die Reihenfolge dieser Spalten neu anzuordnen.

Lösung: Grid Auto Flow mit dem dichten Schlüsselwort

Es gibt zwar mehrere Möglichkeiten, Rasterelemente neu anzuordnen, Die Verwendung des Schlüsselworts „dense“ mit der Eigenschaft „grid-auto-flow“ bietet eine einfache und effiziente Lösung:

<code class="css">grid-auto-flow: dense;</code>

Das Schlüsselwort „dense“ weist den Browser an, leere Rasterzellen automatisch mit Rasterelementen zu füllen und sie zum Ausfüllen zu verschieben Lücken unter Beibehaltung der angegebenen Reihenfolge.

Anwenden auf das Beispiel

Durch Hinzufügen des Schlüsselworts „dense“ zur vorhandenen Rasterklasse werden die Spalten in einem mobilen Layout automatisch neu angeordnet Passen Sie die gewünschte Reihenfolge an:

<code class="css">.my-grid {
  display: grid;
  grid-auto-flow: dense;
  grid-template-columns: 15% 1fr 25%;
  grid-template-rows: 1fr; /* For as many rows as you need */
  grid-gap: 10px;
  border: 2px solid #222;
  box-sizing: border-box;
}</code>

Ergebnis:

---------------------------------------------
|     col 1             |      col 3        |
|                       |                   |
---------------------------------------------
|                     col 2                 |
---------------------------------------------

Diese Lösung bietet einen bequemen und robusten Ansatz zum Ändern der Spaltenreihenfolge, ohne auf Vorprozessoren zurückgreifen zu müssen .

Das obige ist der detaillierte Inhalt vonWie kann ich Spalten in einem CSS-Rasterlayout neu anordnen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!