Верстка сайту за допомогою колонок

12

Від автора: практично на будь-якому веб-сайті потрібно реалізовувати дві чи більше колонок. У цій статті я пропоную розглянути, якими способами реалізується верстка сайту колонками.

Як можна зробити колонки

Спочатку давайте просто розглянемо декілька способів, якими можна зробити колонки, а потім вже розберемо кілька прикладів.

З допомогою плаваючих блоків. Сьогодні це самий популярний спосіб зробити колонки, хоча потихеньку починає тіснити флексбокс. За замовчуванням два блоки у нормальному потоці не можуть стояти на одному рядку, але це поведінка можна легко змінити, прописавши обом властивість float: left | right. Вони почнуть притискатися до лівого або правого краю. Щоб той, хто йде за ними блок сприйняв плаваючі блоки і розмістився правильно, йому потрібно прописати clear: both.

З допомогою флоатов найчастіше роблять 2 або 3 колонки. Верстка сайту з плаваючими блоками не дуже складна, потрібно знати лише деякі нюанси їх поведінки. Наприклад, якщо вам потрібно зробити область для виводу статей, а праворуч – бічну колонку з меню, плаваючі блоки дуже легко реалізують таке розташування.

З допомогою таблиць. Таблиці взагалі були створені для виведення великої кількості клітинок і стовпців, тому зробити в них колонки простіше простого. У таблиці може бути хоч 20 колонок. Вся її структура задається в html-коді, тому код виходить досить громіздким.

Оскільки клітинок у таблиці можна задавати будь-які розміри, раніше з їх допомогою верстали майже всі сайти. Наприклад, для реалізації найпростішого макета (шапка, контент, сайдбар, футер), в таблиці робили три рядки (рядок таблиці формується тегом tr). Кожен рядок містить два осередки, тому що контент і сайдбар повинні розташовуватися окремо один від одного. А в шапці і футері ці клітинки просто поєднували з допомогою атрибуту colspan у тега td, якщо це було необхідно.

У клітинок можна легко прибрати рамку, що дозволяло веб-розробникам верстати складні за структурою шаблони досить легко.

З допомогою флексбокса. Це сучасна технологія, яка почала поширюватися в 2014 році, хоча існувала і до цього. Її суть полягає в наступному: створюється один загальний блок контейнер, в який поміщаються інші блоки, які потрібно буде зробити у вигляді колонок, потім цього контейнера потрібно прописати display: flex.

Далі зазвичай задається властивість flex-direction, яке визначає напрямок головної осі, на якій будуть розташовані блоки. В якості значень можна задати: row і column. Перше значення направить блоки по горизонталі праворуч, друге – вниз. Також можна задати реверс: flex-direction: row-reverse. Блоки розташуються справа наліво.

А далі починається гра з іншими властивостями флекс-контейнера: вирівнювання по головній і поперечної осі, управління перенесенням блоків на новий рядок.

Також є набір окремих властивостей для дочірніх блоків флекс-контейнера. В основному ці властивості дозволяють встановити розмір блоку і його поведінка щодо інших елементів.

Переваги флексбокса в тому, що це набагато більш гнучкий елемент. Якщо при блокової верстки веб-розробникам часто доводилося вираховувати все по пікселям, виставляючи правильні відступи, додаючи різноманітні хитрощі код, щоб все не розвалилося, то флекс-елементи легко вистоюється в колонку, в ряд і взагалі вимагають значно меншої кількості математичних обчислень з боку розробника.

Розбиття тексту на колонки

Тим не менш, я до сих пір не торкнувся саму головну тему. CSS сьогодні пропонує можливість розбити текст в основному блоці без допомоги плаваючих блоків, таблиць або флексбоксов. Тобто в html залишається один звичайний блок, а текст ділиться на колонки виключно завдяки css.

Отже, перелічені нижче властивості застосовуються до блоку, в якому текст потрібно розбити на кілька колонок.

Column-count – властивість задає кількість стовпців, на яку треба розбити текст. Рекомендується виставляти значення від 2 до 4, в залежності від того, як вам більше подобається.

Column-width – задає кількість символів тексту в одній колонці. Я підкреслюю, ширина колонки в даному випадку визначається не пікселями, а кількістю символів. Оптимально: 30-50 символів в одній колонці. Також це властивість аж ніяк не можна назвати кроссбраузерным, тому що ви виставляєте тільки бажане кількість символів, але надійде браузер згідно з вашими побажаннями, це ще невідомо.

Column-gap – визначає проміжок між колонками. Можна задавати в пікселях.

Column-rule – малює лінію, що розділяє стовпчики. Синтаксис властивості повністю повторює властивість border. Спочатку записується товщина лінії, потім її тип, а потім колір.

Також я хотів би згадати, що всі ці css-властивості є відносно новими. Наприклад, Internet Explorer підтримує їх тільки з десятої версії. Це властивості стандарту CSS3, тому якщо ви збираєтеся застосовувати на своєму сайті, то потрібно подбати про кросбраузерність, інакше в старих версіях опери і IE ніяких колонок не буде.

Приклади

Плаваючі блоки. Верстка сайту в дві колонки найчастіше робиться дуже просто за допомогою плаваючих блоків. В css це реалізується приблизно так:

.float-block1{
float: left
}
.float-block2{
float: left
}
блок, який повинен стояти нижче плаваючих{
clear: left | both
}

Тобто нижнього блоку потрібно вказати це властивість обов’язково, щоб він правильно розмістився. Таким чином, плаваючі блоки стануть в один рядок, якщо їм вистачає ширини в батьківському елементі. Природно, потрібно вказати також ширину, висоту і рамку у блоків, щоб вийшло як на цьому скріншоті:

Верстка сайту за допомогою колонок

А тепер зробимо найцікавіше. Давайте додамо багато випадкового тексту в основний блок і спробуємо відображати його там у три колонки, як у газеті чи журналі. Для цього в код цього блоку потрібно дописати такі правила:

-webkit-column-count: 3;
-webkit-column-width: 33;
-webkit-column-rule: 1px solid red;
-webkit-column-gap: 5px

Як бачите, я скрізь поставив префікс webkit, щоб властивості працювали в Google Chrome. Для Mozilla потрібно використовувати префікс –moz. Отже, що ж вийшло?

Верстка сайту за допомогою колонок

Отже, верстка в 3 колонки на css можлива навіть без додавання нових блоків. Ми поставили кількість колонок, їх ширину, роздільник і горизонтальний відступ між ними. Звичайно, властивості мають величезний мінус – вони не кроссбраузерны.

Сьогодні ми розглянули з вами безліч способів зробити колонки з допомогою html і css. Підписуйтесь на наш блог і отримуйте ще більше корисної інформації по сайтостроению.