Spalten - CSS-Tricks | CSS-Almanach 2025

Mit nur wenigen CSS-Regeln können Sie ein druckinspiriertes Layout erstellen, das die Flexibilität des Webs bietet. Es ist wie beim Nehmen einer Zeitung, aber wenn das Papier kleiner wird, werden die Spalten automatisch angepasst und ausgeglichen, sodass der Inhalt auf natürliche Weise fließen kann.

.intro ( columns: 300px 2; )

Die columnsImmobilie wird akzeptieren column-count, column-widthoder beiden Eigenschaften.

columns: || ;

Verwenden Sie beide column-countund column-widthwird empfohlen, um ein flexibles mehrspaltiges Layout zu erstellen. Das column-countwird als maximale Anzahl von Spalten dienen, während das column-widthdie minimale Breite für jede Spalte vorgibt. Durch Zusammenführen dieser Eigenschaften wird das mehrspaltige Layout bei schmalen Browserbreiten automatisch in eine einzelne Spalte zerlegt, ohne dass Medienabfragen oder andere Regeln erforderlich sind.

Ein mehrspaltiges Layout eignet sich hervorragend für Blockelemente einschließlich Listen, um eine flexible Navigation zu ermöglichen.

Um Ihr mehrspaltiges Layout weiter zu optimieren, verwenden Sie break-insidebestimmte Elemente, um zu verhindern, dass sie zwischen den Spalten hängen bleiben.