Утруднення при використанні декількох колонок в дизайні викликає тільки той факт, що ми не можемо контролювати розмір документа. У цьому уроці я покажу вам, як створити адаптивний шаблон з кількома колонками, який буде мати гарний вигляд на різних розмірах екрану. Почнемо ми з основ і поступово перейдемо до складніших речей.
Підтримка в браузерах
Підтримка многоколоночной макета відмінна в тому випадку, якщо ви не проти Вендорний префіксів. За даними статистики Can I use підтримує цю функцію 95.32% браузерів. Кілька браузерів, такі як IE10 +, Edge і Opera Mini повністю підтримують багатоколонкові макети. Іншим же браузерам, таким як Firefox і Chrome потрібні префікси.
Якщо ви підтримуєте старі браузери, вам стане в нагоді старий Поліфем polyfill (тобто IE9 і нижче). Ну і якщо браузер не підтримує кілька колонок, то по техніці витонченої деградації макет перебудується в одну колонку. В такому випадку Поліфему може бути, і не найкращий варіант.
В CSS multi-column layout module є безліч різних властивостей. У наступній частині я розповім про кожне з них окремо.
Практичний курс по верстці адаптивного Лендінзі з нуля!
Навчіться з нуля верстати адаптивні Лендінзі на HTML5 та CSS3 за найближчі 6 днів
Column Count і Column Width
Властивість column-count задає кількість колонок для елемента. Приймаються або позитивні цілі числа, або auto. Якщо задати значення auto, кількість колонок буде визначатися від значення column-width. Якщо задати натуральне число, все колонки будуть мати однакову ширину.
Властивість column-width задає ширину окремих колонок елемента. Властивість не строге. Наприклад, колонки будуть трохи вже заданого значення, якщо місця недостатньо. Дана властивість також приймає значення auto або позитивні цілі числа. Якщо задати auto, ширина буде визначатися властивістю column-count. Вільний простір буде розподілено між всіма колонками по рівному.
Також обидва значення можна задати одночасно за допомогою скороченого властивості columns. Синтаксис властивості columns:
Як видно, перший приклад 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. Синтаксис властивості:
Практичний курс по верстці адаптивного Лендінзі з нуля!
Навчіться з нуля верстати адаптивні Лендінзі на HTML5 та CSS3 за найближчі 6 днів
Властивості 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, щоб вона стала менше ширини. код:
У демо на CodePen показані обидві проблеми і можливі рішення. Змініть розмір вікна браузера, щоб побачити як працюють обидва приклади.
Виправляємо дуже довгі колонки
Якщо колонки стали занадто довгими, користувачам набридне гортати їх вгору і вниз. Коли висота колонок стане більше висоти вікна браузера, краще позбутися декількох колонок і залишити одну. Зробити це можна знову ж за допомогою медіа запитів:
висновок
Сподіваюся, це введення в CSS multi-column layout module познайомило вас з його властивостями. Ці властивості можуть стати прекрасним доповненням вашої скарбнички в адаптивному дизайні. А якщо ви все ще підтримуєте старі браузери, кілька колонок чудово трансформуються в одну з техніки витонченої деградації.
Редакція: Команда webformyself.
Практичний курс по верстці адаптивного Лендінзі з нуля!
Навчіться з нуля верстати адаптивні Лендінзі на HTML5 та CSS3 за найближчі 6 днів
Найсвіжіші новини IT і веб-розробки на нашому Telegram-каналі
