Wie kann ich in CSS ein vertikal ausgerichtetes Raster erstellen?

Verwenden von CSS-Rasterlayout zum Erstellen eines vertikal ausgerichteten Rasters

Bei der Arbeit mit CSS-Rasterlayout kann es vorkommen, dass Sie Wunsch, ein Gitter zu erstellen, das vertikal statt des standardmäßigen horizontalen Flusses verläuft. Während CSS Flexbox die Eigenschaft „flex-direction“ zum Überschreiben der Flussrichtung bereitstellt, fehlt im CSS Grid Layout derzeit ein ähnliches Attribut, das den gewünschten Fluss explizit angibt.

Im CSS Grid Layout ist die Eigenschaft „grid-auto-flow“ verantwortlich zur Bestimmung der Richtung der Artikelplatzierung im Raster. Bei der Einstellung „Zeile“ (Standardwert) fließen die Elemente horizontal und erstellen bei Bedarf neue Zeilen. Umgekehrt würde die Einstellung „Grid-Auto-Flow“ auf „Spalte“ dazu führen, dass Elemente vertikal fließen und bei Bedarf neue Spalten erstellt werden.

Dieses gewünschte Verhalten kann jedoch nicht allein mit CSS Grid Layout erreicht werden. Um ein Raster zu erstellen, das die angegebene Anzahl von Spalten vertikal ausfüllt, ohne Zeilen zu definieren, ist CSS Multi-Column Layout eine geeignete Alternative. Im Gegensatz zu CSS Grid Layout ermöglicht CSS Multi-Column Layout die Erstellung mehrspaltiger Layouts mit automatischem Spaltenfluss, wodurch sichergestellt wird, dass die Rasterelemente vertikal ausgefüllt werden, bis eine neue Spalte benötigt wird.

CSS Multi-Column Layout-Beispiel:

#container {
  columns: 3;  /* Specify the number of columns */
}

#container div {
  margin-left: 5px;  /* Add some margin for clarity */
}

<div>

Durch die Verwendung des mehrspaltigen CSS-Layouts können Sie das gewünschte vertikal ausgerichtete Rasterlayout mit dem erreichen angegebene Anzahl von Spalten ohne Definition von Zeilen, wodurch die Einschränkungen des CSS-Rasterlayouts in diesem speziellen Szenario überwunden werden.

Das obige ist der detaillierte Inhalt vonWie kann ich in CSS ein vertikal ausgerichtetes Raster erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!