Wie kann ich in CSS ein vertikal fließendes Rasterlayout erstellen?

Vertikal fließender Rastercontainer

Im CSS-Rasterlayout ist es nicht direkt möglich, den Rastercontainer so zu definieren, dass er vertikal statt horizontal fließt. Es stellt sich die Frage, ob die Anzahl der Spalten oder Zeilen angegeben werden sollte, da CSS Flexbox das Flex-Direction-Attribut bietet.

CSS-Rasterlayout-Einschränkungen

Das Problem mit CSS Das Rasterlayout ist die umgekehrte Beziehung zwischen den Eigenschaften „grid-auto-flow“ und „grid-template-rows/columns“. Wenn „grid-auto-flow: row“ zusammen mit „grid-template-columns“ festgelegt wird, erstellen die Rasterelemente automatisch Zeilen, die in horizontaler Richtung fließen.

Alternative für mehrspaltiges Layout

Für ein wirklich vertikal fließendes Raster sollte das mehrspaltige CSS-Layout in Betracht gezogen werden. Dieses Modul ermöglicht die Erstellung neuer Spalten nach Bedarf, ohne Zeilen zu definieren:

#container {
  column-count: 3;
}

Beispiel:

<div>

Dieser Code erstellt ein vertikal fließendes Raster mit drei Spalten.

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