За допомогою лише кількох правил CSS ви можете створити макет для друку, який має гнучкість Інтернету. Це все одно, що брати газету, але в міру того, як паперу стає менше, стовпці автоматично регулюються та балансують, дозволяючи вмісту протікати природним шляхом.
.intro ( columns: 300px 2; )columnsВластивість буде приймати column-count, column-widthабо обидва властивості.
columns: || ;Використовуючи обидва column-countі column-widthрекомендується створювати гнучкий макет із кількома колонками. column-countВиступатиме в якості максимального числа стовпців, в той час як column-widthбуде диктувати ширину мінімальної для кожного стовпчика. З’єднавши ці властивості, макет із кількома стовпцями автоматично розпадається на один стовпець із вузькою шириною браузера без потреби в медіа-запитах чи інших правилах.
Макет із кількома стовпцями чудово працює з елементами блоків, включаючи списки, щоб зробити гнучку навігацію.
Для подальшої точної настройки багатокалонного макета використовуйте break-insideпевні елементи, щоб вони не застрягли між стовпцями.
Більше інформації
- Модуль макета CSS з декількома стовпцями рівень 1 (робочий проект)
- Документація MDN
Підтримка браузера
| IE | Край | Firefox | Chrome | Сафарі | Опера |
|---|---|---|---|---|---|
| 10+ | Всі | 9+ | 50+ | Всі | 11,5+ |
| Android Chrome | Android Firefox | Браузер Android | iOS Safari | Opera Mobile |
|---|---|---|---|---|
| Всі | Всі | Всі | Всі | Всі |