Wenn Sie beim Entwerfen eines mehrspaltigen Layouts eine genaue Anzahl von Spalten benötigen, verwenden Sie column-count.
.lead ( column-count: 3; )Angesichts der Anzahl der Spalten verteilt der Browser den Inhalt gleichmäßig auf genau diese Anzahl von Spalten.
Diese Eigenschaft kann auch in der Kurzform für columnsund zusammen mit verwendet werden column-width. Wenn beide Eigenschaften deklariert sind, column-countist die maximale Anzahl von Spalten.
Werte
column-countkann autooder eine ganze Zahl sein.
Verwenden autoSie, wenn Sie auch verwenden column-width. Stellen Sie sich das vor, um dem Browser zu sagen column-width, dass er die Führung übernehmen soll.
Die Ganzzahl, auch als Anzahl der Spalten bezeichnet, muss größer oder gleich 0 sein.
Im Gegensatz zu column-widthdieser Eigenschaft wird die Anzahl der Spalten unabhängig von der Browserbreite gespeichert. Dies bedeutet, dass Sie, wenn Sie ein 5-Spalten-Layout auf Ihrem Mobiltelefon aufgerufen haben, ein sehr gequetschtes 5-Spalten-Layout zum Navigieren haben. column-countfunktioniert am besten neben column-width.
Browser-Unterstützung
Unterstützung für mehrspaltiges Layout:
| Chrom | Safari | Feuerfuchs | Oper | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Irgendein | 3+ | 1,5+ | 11.1+ | 10+ | 81 | 3.2+ |
Vergessen Sie Ihre Präfixe nicht, wenn Sie noch kein Tool verwenden, das Ihnen dabei hilft.