Коли ви хочете зберегти колонки на певній ширині, використовуйте column-width
.
section ( -webkit-column-width: 200px; -moz-column-width: 200px; column-width: 200px; )
Браузер розрахує, скільки стовпців принаймні такої ширини може поміститися в просторі. Подумайте про column-width
пропозицію щодо мінімальної ширини для браузера.
column-width
є гнучкою властивістю. Як тільки браузер не може вмістити принаймні 2 стовпці на вказану вами ширину, то стовпці зупиняться та потраплять в один стовпець.
Ця властивість також використовується в скороченні columns
і може бути використана в тандемі з column-count
. Коли заявляються обидві властивості, column-count
це максимальна кількість стовпців.
Цінності
Ви можете встановити column-width
на auto
або довжину.
Використовуйте, auto
якщо ви також використовуєте column-count
або якщо вам потрібно вимкнути власність. Подумайте про це як про спосіб сказати браузеру column-count
взяти на себе ініціативу.
Щоб вказати ширину стовпців, використовуйте довжину, більшу (або рівну) 0. Ви можете використовувати будь-яку одиницю CSS, крім відсотків.
Підтримка браузера
Підтримка макета з кількома стовпцями:
Chrome | Сафарі | Firefox | Опера | IE | Android | iOS |
---|---|---|---|---|---|---|
Будь-який | 3+ | 1,5+ | 11,1+ | 10+ | 2.3+ | 6.1+ |
Не забудьте свої префікси!