Нова сітка на inline-block: опис, приклад використання, плюси і мінуси

Для сучасної верстки використання сітки не новина. Практично всі html-фреймвоки використовують ту або іншу сітку. Я зустрічала 3 види сітки:

  • сітка на float;
  • сітка на inline-block;
  • сітка на flexbox.
Сітка на inline-block має свої особливості, плюси і мінуси, які слід розглянути.

Введення
Сітка, в якій для розташування елементів в ряд використовується властивість float: left або float: right використовується в більшості html-фреймвоках (Foundation, Bootstrap тощо). У неї є свої плюси і мінуси. Думаю, вона популярна тому, що була першим гідним рішенням після табличної верстки, а також підтримується старими браузерами. Однак працюючи з нею я зустріла в ній принаймні 2 істотних недоліки.

  1. елемент із заданою властивістю float відсутня висота і тому важко вирівняти дочірні елементи по вертикалі.
  2. Якщо кілька елементів з властивість float розташовані по горизонталі в один ряд і попередній елемент (нехай це елемент А) має більшу висоту, ніж наступні (елементи В), то при переході на наступну сходинку один з елементів може «зачепитися» за елемент і не потрапити в початок рядка. У фреймвоках ця проблема вирішується наявністю елемента-рядка (Bootstrap — це клас row), але тоді потрібно чітко знати, скільки елементів у рядку. А якщо товари на сторінці категорії виводяться в циклі і на десктопі вони повинні розташовуватися по 5 в ряд, а на мобільному — по 3?
Ці недоліки призвели мене до пошуку інших рішень. Природно, хорошим рішенням є сітка з використанням flexbox, яка дозволяє гнучко налаштувати розташування елементів всередині контейнера. Її головним недоліком є підтримка тільки сучасними браузерами. Але хотілося спробувати і інші рішення. Прочитавши кілька статей про використання елементів властивість display: inline-block для вирівнювання елементів і розташуванні в ряд, я почала шукати сітку на inline-block. Однак нічого готового для використання у проектах я не знайшла. Тільки окремі заготовки. Тому, я вирішила сама створити таку сітку. Для іменування класів я використовувала методологію БЕМ (Блок-Елемент-Модифікатор). Отже, давайте розглянемо що вийшло.

Брейкпоинты і нормалізація тегів
У сітці використовуються наступні брейкпоинты (контрольні ширини браузера, при яких змінюється розташування блоків) і префікси для них:

  • xs: 480рх,
  • sm: 768рх,
  • ms: 1024рх,
  • md: 1280рх,
  • lg: 1440рх,
  • mg: 1680рх.
Для сітки використовується мінімальна нормалізація елементів, необхідних для коректного відображення контенту:

* {
box-sizing: border-box;
}
html
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow-x: hidden;
}
html {
font-size: 10px;
}

Однак можна використовувати її разом з іншими бібліотеками (Reset.css, Normalize.css і пр). У сітці також всі розміри вказані в одиницях rem, які відносні шрифту елемента html. Тому для масштабування шрифт html на різних брейкпоинтах змінюється:

@media (max-width: 1680px) {
html {
font-size: 9.5 px;
}
}
@media (max-width: 1440px) {
html {
font-size: 9px;
}
}
@media (max-width: 1280px) {
html {
font-size: 8.5 px;
}
}
@media (max-width: 1024px) {
html {
font-size: 8px;
}
}
@media (max-width: 768px) {
html {
font-size: 8.5 px;
}
}
@media (max-width: 480px) {
html {
font-size: 7px;
}
}

У сітці за замовчуванням використовується 24 колонки і такі відступи між блоками: 1, 2, 3, 4, 5, 10, 15, 20, 25, 30, 40, 50. З приводу відступів слід пояснити. Відступ, скажімо, 15 — це не 15рх! Це означає, що на ширині браузера 1920рх (яку я приймаю як відправну точку, оскільки для цієї ширини найчастіше створюється дизайн сайту) відступ блоку з одного боку буде 15рх. А враховуючи, що шрифт html на цій ширині дорівнює 10рх, то відступ у сітці задається як 1.5 rem. На меншій ширині шрифт html буде менше і відступи теж зменшаться.

Брейкпоинты, кількість колонок, відступи і стартовий шрифт html можна змінити в SASS-версії сітки і згенерувати потрібну для проекту сітку.

Основні блоки сітки
У сітці я використовую 3 основні блоки:

  • клас grid — для позначення зовнішнього блоку;
  • клас box — для позначення додаткового блоку всередині grid;
  • клас cell — для позначення внутрішніх блоків всередині grid або box.
Отже, сітка має таку структуру:

<div class="grid">
<div class="box">
<div class="cell">Елемент 1</div>
<div class="cell">Елемент 2</div>
<div class="cell">Елемент 3</div>
</div>
</div>

Або таку:

<div class="grid">
<div class="cell">Елемент 1</div>
<div class="cell">Елемент 2</div>
<div class="cell">Елемент 3</div>
</div>

Якщо так, то відразу напрошується питання: А навіщо тоді додатковий блок box? Блок box може бути тільки одним усередині grid і необхідний, якщо потрібні відступи між внутрішніми блоками або вирівнювання внутрішніх блоків.

Модифікатори блоку grid
Блок grid має такі модифікатори:

  • grid--size застосовується у разі, якщо ширина блоку фіксована і на кожному брейкпоинте вона дорівнює ширині попереднього брейкпоинте. Наприклад, якщо ширина браузера 1366рх, і в блоці grid вказати модифікатор grid--size, то блок буде мати ширину 1280рх і буде розташовуватися по середині.

  • grid--st, grid--sm, grid--ms, grid--md, grid--md, grid--mg — застосовується, якщо потрібно, що б ширина, починаючи з якогось брейкпоинта, була фіксована, а до цього блок буде поширюватися по всій ширині. Наприклад, якщо використовувати модифікатор grid--md, то на ширину менше 1280рх блок буде мати ширину 100%, а починаючи з ширини 1280рх буде дорівнювати цій ширині.

  • grid--col24 застосовується, якщо потрібно використовувати колонки вказаної ширини. Оскільки можна згенерувати кілька-колонкову сітку (наприклад, 24 колонки і 35 колонок), то можна використовувати модифікатори grid--col24 та grid--col35. Перший дасть можливість розташовувати елементи по 2, 3, 4, 6, 12 в ряд, а другий — по 5 і 7 в ряд. Це буває потрібно, якщо в дизайні використовується різне число колонок.

  • grid--g10, grid--v10, grid--gv10 задають відступи між внутрішніми блоками (cell) відповідно тільки по горизонталі, тільки по вертикалі і в обох напрямках. Цифра в кінці (у даному випадку 10) вказує на ширину відступу з одного боку. Наприклад, якщо ми хочемо відступи між внутрішніми блоками в 3rem тільки по горизонталі, то зовнішнього блоку потрібно вказати модифікатор grid--g15. Однак тут є 2 тонкощі:

    1. По горизонталі блок може мати однакові відступи і справа, і зліва, в той час, як по вертикалі робиться подвійний відступ знизу. Це зроблено для зручності, оскільки в основному перший блок починається зверху без відступу, а блоки, що йдуть знизу повинні відділятися від нього відступом;

    2. Відступи робляться тільки всередині між внутрішніми блоками, а зовні вони щільно прилягають до зовнішнього блоку.
Модифікатори блоку box
Блок box має такі модифікатори:

  • box--left, box--right, box--center, box--justify використовується, якщо потрібно вирівняти колонки по горизонталі відповідно ліворуч, праворуч, по центру і по всій ширині.

  • box--top, box--bottom, box--middle використовується, якщо потрібно вирівняти колонки по вертикалі, відповідно зверху, знизу і по центру.
Модифікатори блоку cell
Блок cell має такі модифікатори:

  • cell--none, cell--auto, cell--full задають як буде відображається внутрішній блок за замовчуванням: приховано, мати власну ширину або поширюватися на всю ширину батьків;

  • cell--col1, cell--col2, cell--col3 і т. д. задають конкретну початкову ширину внутрішнього блоку. Наприклад, модифікатор cell--col2 означає, що блок буде займати 2 колонки;

  • cell--st5, cell--xs10, cell--md15 і т. д. ширину внутрішнього блоку на певному брейкпоинте. Наприклад, модифікатор cell--md15 означає, що ширина блоку буде складати 15 колонок при ширині екрана < 1280px (md).

  • cell--left, cell--right, cell--center,cell--justify задають вирівнювання елементів усередині блоку по горизонталі відповідно ліворуч, праворуч, по центру і по всій ширині;

  • cell--top, cell--bottom, cell--middle задають вирівнювання по вертикалі, відповідно зверху, знизу і по центру. Проте слід врахувати, що оскільки внутрішні блоки мають властивість display: inline-block, то по вертикалі вони вирівнюються відносно один одного, а не батька! Тому, щоб вирівняти в блоці по вертикалі, наприклад, по центру, потрібно обом блокам поставити модифікатор cell--middle.
Приклад застосування модифікаторів
Наступний фрагмент коду показує, як можуть застосовуватися різні модифікатори разом:

<div class="grid grid--col24 grid--size grid--gv15">
<div class="box box--middle">
<div class="cell cell--none cell--md8 cell--sm24">
Елемент 1
</div>
<div class="cell cell--none cell--md8 cell--sm24 cell--center">
Елемент 2
</div>
<div class="cell cell--none cell--md8 cell--sm24 cell--right">
Елемент 3
</div>
</div>
</div>

Висновок
Вихідні файли сітки та приклад її використання можна дивитися тут. Зверніть увагу, що в репозиторії є файл grid-inline-block.css з скомпілованої сіткою з зазначеними вище параметрами. Але також є і файл grid-inline-block.scss, використовуючи який можна зібрати свій варіант сітки.



Створена сітка має свої плюси:

  1. Вирішує проблеми з сіткою на float і робить по суті те ж саме.
  2. На відміну від сітки на float може вирівнювати елементи по вертикалі, а також задавати різну кількість колонок або різні відступи.
  3. На відміну від сітки на flexbox підтримується і більш старими браузерами, наприклад, ИЕ9 старими версіями Android.
  4. Дозволяє внутрішні блоки приховувати або відображати на потрібної ширини екрана.
  5. Має цікаву здатність вирівнювати елементи по вертикалі відносно один одного. Це буває корисним для пунктів меню.
  6. Велика кількість внутрішніх блоків з різними модифікаторами можуть знаходиться в межах одного зовнішнього блоку і вони один одному заважати не будуть
  7. Дозволяє створювати нескінченну вкладеність зовнішніх блоків.
Однак сітка і не позбавлена недоліків. Ось деякі з них:

  1. При завданні останньому зовнішнього блоку (наприклад, підвалу сайту) модифікаторів grid--v10 або grid--gv10 (10 — це для прикладу), тобто які ставлять вертикальний внутрішній відступ, то цей останній блок не буде притиснутий до низу сторінки. Це пов'язано з тим, що негативний margin-bottom, який тут використовується не працює в поєднанні з нижньою межею body. Вирішити цю проблему можна просто не задаючи зазначений модифікатори останнього блоку.
  2. Хоч сітка і має деяку гнучкість у вирівнюванні внутрішніх блоків, але їй не зрівнятися в цьому з flexbox.
  3. Якщо з якихось причин внутрішній блок став більше по ширині, ніж те місце, що йому було відведено (таке може статися, якщо не ставити конкретну ширину внутрішнім блокам, а обмежиться тільки класом cell), то цей блок перескочить на нову сходинку, що часто не бажано. Тому такі моменти потрібно продумувати відразу.
Не можу сказати, що ця сітка краще за всіх і всі її повинні використовувати. Але думаю, вона має право на існування поряд з іншими.
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.