Wie kann ich ein CSS-Raster vertikal mit einer festen Anzahl von Spalten füllen?

Machen Sie den Rastercontainer dazu, Spalten und nicht Zeilen zu füllen

Frage:

Wie kann ich ein CSS-Raster erstellen, das ausfüllt? vertikal statt horizontal, was eine beliebige Anzahl von Zeilen ermöglicht und gleichzeitig eine feste Anzahl von Zeilen beibehält Spalten?

Antwort:

Während CSS Grid Layout dieses spezielle Layout nicht nativ verarbeiten kann, bietet CSS Multi-Column Layout eine Lösung.

CSS Multi-Column Layout:

#container {
  column-count: 3;
}

Dieser Code definiert einen Container mit drei Spalten, der erstellt bei Bedarf automatisch neue Spalten und erfüllt die Anforderungen an den vertikalen Fluss.

CSS-Rasterlayout-Einschränkungen:

Im CSS-Rasterlayout, Grid-Auto-Flow und Grid -template-columns haben eine umgekehrte Beziehung:

• Mit Grid-Auto-Flow: Row (Standard) und Grid-Template-Columns definiert, fließen Elemente horizontal und erstellen automatisch neue Zeilen.
• Das Umkehren dieser Eigenschaften (grid-auto-flow: Column und Grid-Template-Rows definiert) führt jedoch zu einer ungültigen Deklaration.

Daher ist es mit CSS Grid Layout allein nicht möglich, ein vertikal füllendes Raster mit einer festen Anzahl von Spalten zu erreichen.

Das obige ist der detaillierte Inhalt vonWie kann ich ein CSS-Raster vertikal mit einer festen Anzahl von Spalten füllen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!