Якщо вам потрібна точна кількість стовпців під час проектування багатоколонного макета, використовуйте 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+ |
Не забувайте префікси, якщо ви вже не використовуєте інструмент, який уже допомагає в цьому.