Ако имате нужда от точен брой колони, когато проектирате оформление с много колони, използвайте column-count
.
.lead ( column-count: 3; )
Като се има предвид броят на колоните, браузърът ще разпредели равномерно съдържанието точно в този брой колони.
Това свойство може да се използва и в стенографията за columns
и може да се използва в тандем с column-width
. Когато и двете свойства са декларирани, column-count
е максималният брой колони.
Стойности
column-count
може да бъде auto
или цяло число.
Използвайте, auto
ако също използвате column-width
. Мислете за това като за начин да кажете на браузъра, да оставите да column-width
поемете водещата роля.
Цялото число, известно още като брой колони, трябва да бъде по-голямо или равно на 0.
За разлика от column-width
това свойство ще съдържа броя на колоните, независимо от ширината на браузъра. Това означава, че ако сте извадили 5-колонна подредба на мобилния си телефон, ще имате много притискана 5-колонна подредба за навигация. column-count
работи най-добре заедно column-width
.
Поддръжка на браузър
Поддръжка на оформление с няколко колони:
Chrome | Сафари | Firefox | Опера | IE | Android | iOS |
---|---|---|---|---|---|---|
Всякакви | 3+ | 1,5+ | 11.1+ | 10+ | 81 | 3.2+ |
Не забравяйте вашите префикси, ако вече не използвате инструмент, който помага за това.