Wie lässt sich ein CSS-Rastercontainer mit Spalten statt mit Zeilen füllen?

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

Im CSS-Rasterlayout bestimmt die Eigenschaft „grid-auto-flow“, ob Elemente in Zeilen oder Spalten angeordnet werden. Bei der Standardeinstellung „Reihe“ werden Elemente horizontal platziert, wodurch bei Bedarf neue Reihen erstellt werden. Dieses Verhalten ist normalerweise nicht ideal, wenn das gewünschte Layout vertikal ist.

Wenn „grid-auto-flow“ auf „row“ eingestellt ist, definiert „grid-template-columns“ die Anzahl der Spalten im Raster. Allerdings fließen die Elemente in diesem Szenario immer noch horizontal und füllen eher die Zeilen als die Spalten.

Für ein vertikal fließendes Raster, das bei Bedarf neue Spalten erstellt, ohne Zeilen zu definieren, sollten Sie die Verwendung von CSS Multi-Column in Betracht ziehen Stattdessen Layout. Es ermöglicht das vertikale Stapeln von Elementen und erstellt bei Bedarf automatisch neue Spalten.

#container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-flow: row;
}

Dieser Codeausschnitt veranschaulicht das Konzept. Elemente fließen horizontal und erstellen bei Bedarf neue Zeilen, trotz der Definition von drei Spalten in der Eigenschaft „grid-template-columns“. Beachten Sie, dass die Verwendung von CSS Grid Layout für dieses spezielle Layout nicht empfohlen wird.

Das obige ist der detaillierte Inhalt vonWie lässt sich ein CSS-Rastercontainer mit Spalten statt mit Zeilen füllen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!