Верстка сайту колонками способи та їх реалізація
Як можна зробити колонки
Спочатку давайте просто розглянемо кілька способів, якими можна зробити стовпчики, а потім вже розберемо пару прикладів.
За допомогою плаваючих блоків. Сьогодні це найпопулярніший спосіб зробити колонки, хоча потихеньку його починає тіснити флексбокс. За замовчуванням два блоки в нормальному потоці не можуть стояти на одному рядку, але цю поведінку можна легко змінити, прописавши обидві властивості float: left right. Вони почнуть притискатися до лівого чи правого краю. Щоб блок, що йде за ними, сприйняв плаваючі блоки і розмістився правильно, йому потрібно прописати clear: both.
За допомогою флоатів найчастіше роблять 2 або 3 колонки. Верстка сайту з плаваючими блоками не дуже складна, потрібно знати лише деякі нюанси їх поведінки. Наприклад, якщо вам потрібно зробити область для виведення статей, а праворуч – бічну колонку з меню, то плаваючі блоки дуже легко реалізують таке розташування.
За допомогою таблиць. Таблиці взагалі були створені для виведення великої кількості осередків і стовпців, тому зробити колонки простіше простого. У таблиці може бути хоч 20 колонок. Вся її структура задається в html-коді, тому код виходить досить громіздким.
Практичний курс з верстки адаптивного сайту з нуля!
Вивчіть курс і дізнайтеся, як верстати сучасні сайти на HTML5 та CSS3
Оскільки осередкам у таблиці можна ставити будь-які розміри, раніше за їх допомогою верстали майже всі сайти. Наприклад, для реалізації найпростішого макета (шапка, контент, сайдбар, футер) у таблиці робили три рядки (рядок таблиці формується тегом tr). Кожен рядок містить два осередки, тому що контент і сайдбар повинні розташовуватися окремо один від одного. А в шапці та футері ці осередкипросто з'єднували за допомогою атрибута colspan у тега td, якщо це було необхідно.
У осередків можна легко прибрати рамку, що дозволяло веб-розробникам верстати складні структури шаблони досить легко.
За допомогою флексбоксу. Це сучасна технологія, яка почала поширюватись у 2014 році, хоча існувала і до цього. Її суть полягає в наступному: створюється один загальний блок контейнер, в який містяться інші блоки, які потрібно буде зробити у вигляді колонок, потім цьому контейнеру потрібно прописати display: flex.
Далі зазвичай визначається властивість flex-direction, яке визначає напрямок головної осі, по якій будуть розташовані блоки. Як значення можна задати: row і column. Перше значення направить блоки по горизонталі праворуч наліво, друге – вниз. Також можна встановити реверс: flex-direction: row-reverse. Блоки розташуються праворуч наліво.
А далі починається гра з іншими властивостями флекс-контейнера: вирівнювання по головній та поперечній осі, керування перенесенням блоків на новий рядок.
Також є набір окремих властивостей дочірніх блоків флекс-контейнера. В основному ці властивості дозволяють задати розмір блоку та його поведінку щодо інших елементів.
Переваги флексбоксу в тому, що це набагато більш гнучкий елемент. Якщо при блоковій верстці веб-розробникам часто доводилося вираховувати все за пікселями, виставляючи правильні відступи, додаючи різноманітні хитрощі в код, щоб все не розвалилося, то флекс-елементи легко вистоюються в колонку, в ряд і взагалі вимагають значно меншої кількості математичних обчислень з боку розробника.
Розбиття тексту на колонки
Тим не менш, я досі не торкнувся найголовнішої теми. CSS сьогодні пропонує можливість розбити текств основному блоці без допомоги плаваючих блоків, таблиць або флексбоксів. Тобто в HTML залишається один звичайний блок, а текст ділиться на колонки виключно завдяки css.
Отже, перелічені нижче властивості застосовуються до блоку, в якому текст потрібно розбити в кілька колонок.
Column-count – властивість задає кількість колонок, на які потрібно розбити текст. Рекомендується виставляти значення від 2 до 4 залежно від того, як вам більше подобається.
Практичний курс з верстки адаптивного сайту з нуля!
Вивчіть курс і дізнайтеся, як верстати сучасні сайти на HTML5 та CSS3
Column-width – вказує кількість символів тексту в одній колонці. Я наголошую, ширина колонки в даному випадку задається не пікселами, а кількістю символів. Оптимально: 30-50 символів в одній колонці. Також цю властивість ніяк не можна назвати кросбраузерною, тому що ви виставляєте лише бажану кількість символів, але чи надійде браузер у згоді з вашими побажаннями, це ще невідомо.
Column-gap – визначає проміжок між колонками. Можна ставити в пікселях.
Column-rule – малює лінію, яка розділяє колонки. Синтаксис властивостей повністю повторює властивість border. Спочатку записується товщина лінії, потім її тип, а потім колір.
Також я хотів би згадати, що всі ці css-властивості є відносно новими. Наприклад, Internet Explorer підтримує їх лише з десятої версії. Це властивості зі стандарту CSS3, тому якщо ви їх збираєтеся застосовувати на своєму сайті, то потрібно подбати про кросбраузерність, інакше в старих версіях опери та IE ніяких колонок не буде.
Плаваючі блоки. Верстка сайту в дві колонки найчастіше робиться дуже просто за допомогою плаваючих блоків. У css це реалізується приблизно так: