Від автора: для деяких читати величезні шматки тексту важко. Люди намагаються не пропустити рядок, а не зосередитися на тексті. Дану проблему можна легко вирішити за допомогою колонок. В друкованих журналах колонки вже давно поширені. За допомогою модуля CSS Multi-column Layout Module ми можемо відтворити ефект декількох колонок на веб-сайті.
Утруднення при використанні декількох колонок в дизайні викликає лише той факт, що ми не можемо контролювати розмір документа. У цьому уроці я покажу вам, як створити адаптивний шаблон з декількома колонками, який буде відмінно виглядати на різних розмірах екрану. Почнемо ми з основ і поступово перейдемо до складніших речей.
Підтримка в браузерах
Підтримка багатоколонкового макета відмінна в тому випадку, якщо ви не проти вендорних префіксів. За даними статистики Can I use дана функція підтримується в 95.32% браузерів. Кілька браузерів, такі як IE10+, Edge і Opera Mini повністю підтримують многоколоночные макети. Іншим же браузерів, таких як Firefox і Chrome потрібні префікси.
Якщо ви підтримуєте старі браузери, вам знадобиться старий полифил polyfill (тобто IE9 і нижче). Ну і якщо браузер не підтримує декілька колонок, то по техніці витонченої деградації макет перебудується в одну колонку. У такому разі полифил, може бути, і не найкращий варіант.
В CSS multi-column layout module є безліч різних властивостей. У наступній частині я розповім про кожне з них окремо.
Стовпців і Column Width
Властивість column-count задає кількість колонок для елемента. Приймаються або додатні цілі числа, або auto. Якщо задати значення auto, кількість колонок буде визначатися від значення column-width. Якщо задати позитивне ціле число, всі шпальта будуть мати однакову ширину.
Властивість column-width задає ширину окремих колонок елемента. Властивість не суворе. Наприклад, колонки будуть трохи вже заданого значення, якщо місця недостатньо. Ця властивість також приймає значення auto або додатні цілі числа. Якщо задати auto, ширина буде визначатися властивістю column-count. Вільний простір буде розподілено між усіма колонками по ровну.
Також обидва значення можна задати одночасно з допомогою скороченого властивості columns. Синтаксис властивості columns:
.example {
columns: ||
}
Нижче наведено кілька прикладів використання даної властивості з коментарями зліва:
.example {
columns: 10em; /* column-width: 10em / column-count: auto */
columns: 4; /* column-width: auto / column-count: 4 */
columns: 4 auto; /* column-width: auto / column-count: 4 */
columns: auto 10em; /* column-count: auto / column-width: 4 */
columns: auto; /* column-count: auto / column-width: auto */
columns: auto auto; /* column-count: auto / column-width: auto */
}
Як видно, перший приклад columns це скорочений четвертий, а другий приклад-це скорочений третій. Насправді, якщо у цілого числа немає одиниць виміру, то значення відноситься до column-count. На CodePen продемонстровано демо з усіма озвученими властивостями. Якщо змінити розмір вікна, можна помітити:
Властивість column-count завжди підтримує кількість заданих вами колонок. Змінюється тільки їх ширина.
Властивість column-width автоматично змінює кількість колонок на основі вільного простору. Кількість колонок виставляється таким чином, щоб їх ширина була більше заданої. Також якщо місця не достатньо, ширина всіх колонок може бути трохи менше заданої.
Властивість columns використовує column-count як максимальну кількість дозволених колонок. Ширина колонок буде підлаштовуватися, щоб column-count ніколи не перевищувало число заданих колонок, а column-width буде приблизно дорівнює заданій ширині.
Column Gap і Column Rule
З допомогою column-gap можна задати простір між колонок. Приймаються normal або числові значення. Можна задати 0, але тільки не від’ємне значення. Якщо задано normal, буде використано значення за замовчуванням у браузері для відстані між колонок.
column-rule – скорочення, за допомогою якого можна додати лінію між двох колонок. Це те ж саме, що властивості border-left або border-right. Синтаксис властивості:
.example {
column-rule: || ||
}
Властивості column-rule-width можна задати ширину 3px, або ж використовувати ключові слова thin, medium або thick. column-rule-style приймає значення типу dashed, dotted, solid і т. д. Все значення властивості border-style можна застосувати до column-rule-style, а значенням column-rule-color може бути будь-яка валидная форма запису кольору. На CodePen продемонстровано демо обох властивостей.
Column-Fill і Column Span
Властивість column-fill визначає, як буде розподілений контент, щоб він заповнив колонки. Властивість приймає значення auto і balance, колонки заповнюються послідовно. Якщо задати balance, контент рівномірно розподілиться по всіх колонках.
Варто врахувати тільки те, що, якщо поставити фіксовану висоту колонок, то Firefox автоматично збалансує контент. В інших браузерах контент буде заповнюватися послідовно.
Властивість column-span контролює те, як елемент буде розтягуватися на всі колонки. Воно має два можливих значення: all і none. Якщо задати all, елемент розтягується на всі колонки. Властивість не підтримується в Firefox.
На CodePen демонструється демо, в якому показано, як цитата розтягується на всі колонки. У Firefox цитата розташовується в центральній колонці, що можна вважати прийнятним фолбэком.
Як створити адаптивний макет з декількома колонками
Тепер, коли ви довідалися про різні властивості та їх значення, давайте зробимо наш шаблон адаптивним і дружнім до користувача.
З властивостями column-count та column-width є свої проблеми. Властивість column-count підтримує потрібне число колонок на великих екранах пристроїв, проте макет може посипатися на маленьких екранах. Схожий принцип і у column-width, яке забезпечує не занадто вузькі колонки на маленьких екранах, але на великих екранах дає занадто багато колонок.
Щоб ваш макет виглядав добре на всіх екранах, необхідно встановити обидві властивості, column-count та column-width. Так ви зможете контролювати ширину та кількість колонок. Вам потрібно буде пофіксити пару проблем, про них ми поговоримо трохи нижче.
Виправляємо горизонтальну прокрутку
Якщо висота колонок фіксована, а вікно браузера зменшилася, то з’явиться горизонтальна прокрутка. Так як контент не може розширюватися вертикально, то він буде робити це по горизонталі. Щоб це виправити, необхідно змінити ширину вікна браузера до тих пір, поки не з’явиться горизонтальна прокрутка. Потім, за допомогою медіа запитів необхідно задати висоту колонок в auto, щоб вона стала менше ширини. Код:
.responsive-height {
height: 250px;
}
@media (max-width: 1040px) {
.responsive-height {
height: auto;
}
}
У демо на CodePen показані обидві проблеми і можливі рішення. Змініть розмір вікна браузера, щоб побачити як працюють обидва приклади.
Виправляємо дуже довгі колонки
Якщо колонки стали занадто довгими, користувачам набридне гортати їх вгору і вниз. Коли висота колонок стане більше висоти вікна браузера, краще позбавитися від декількох колонок і залишити одну. Зробити це можна знову ж таки за допомогою медіа-запитів:
@media (min-width: 800px) {
.long-columns {
columns: 3 200px;
}
}
У нашому прикладі я використовую кілька колонок тільки коли ширина вікна браузера така, щоб користувачеві не доводилося гортати сторінку вгору і вниз. Перегляньте демо з декількома колонками і медіа запитами
Висновок
Сподіваюся, це введення в CSS multi-column layout module познайомив вас із його властивостями. Ці властивості можуть стати прекрасним доповненням вашої скарбнички в адаптивному дизайні. А якщо ви все ще підтримуєте старі браузери, кілька колонок чудово трансформуються в одну з техніки витонченої деградації.
