Сітки, створені з допомогою calc(), — кращі сітки

16

Від автора: Привіт. Мене звуть Кору (Cory). У мене є одна невелика пристрасть. Я вже дуже давно і серйозно захоплююся сітковими системами. За фактом, я допоміг створити досить популярну сіткову систему під назвою Jeet. Я завжди любив, коли математика використовується для впорядкування та розміщення речей.

Я думаю, ви всі погодитеся, що фіксовані сітки вже вимерли, як динозаври, а їм на зміну прийшли «гумові» сітки. Але при роботі з «гумовими» сітками у мене завжди виникали які-небудь помилки або ускладнення. Наприклад, неможливо зробити так, щоб відступ/проміжок (gutter) зверху і знизу був таким же, як і відступ зліва і справа. Серйозно, спробуйте самі.

І неможливо використовувати необмежену вкладеність, не позначивши деякого контексту при побудові сітки. Наприклад, в Jeet, вам потрібно набрати column(1/3 1/2) , де 1/2 — це розмір батьківського контейнера. І це стає досить незручним моментом, коли ви використовуєте вкладеність три або чотири рази поспіль і ваші оголошення вже виглядають як-то ось так: column(1/4 1/3 1/2 1/2). Та вже! Але це не тільки проблема Jeet. Вона є в будь-сіткової системі, заснованої на препроцессорах.

А як же Bootstrap? Не змушуйте мене розповідати, скільки зайвих елементів вам доведеться додати у вашу розмітку, щоб ваша сіткова система запрацювала — це не призведе ні до чого, крім помилок. Або взяти той факт, що вам потрібно ще більше елементів в розмітці, щоб задати фоновий колір для елементів. Ось приклад цієї невеликої проблеми у вигляді галереї.

Прикро, що, схоже, навіть Flexbox не може запропонувати нічого нового, крім зручного способу отцентровки елементів по вертикалі. Після такої запаморочливої екскурсії про те, що не так з сітками на даний момент, виникає питання: «А що повинен робити той, хто обожнює використовувати сітки?»

Почекайте, а що це за відмінна штука? Calc()?

Ми можемо використовувати функцію calc() в нашому CSS. Так що ж вона робить?

«З допомогою функції calc() ви можете здійснювати обчислення для визначення значень у CSS властивостей». — MDN

І не тільки це. Використовуючи calc(), ми також можемо комбінувати одиниці вимірювання. Це означає, що якщо нам потрібно створити сітку, що складається з чотирьох колонок, мають проміжок в 20px між ними, у кожному рядку, то ми можемо написати комбінацію процентних і піксельних значень, наприклад, width: calc(25% — 20px). Хіба це не фантастика?

Приклад. У нас є наступна розмітка – сім зображень з кошенятами всередині батьківського елемента section:

Сітки, створені з допомогою calc(), — кращі сітки
Сітки, створені з допомогою calc(), — кращі сітки
Сітки, створені з допомогою calc(), — кращі сітки
Сітки, створені з допомогою calc(), — кращі сітки
Сітки, створені з допомогою calc(), — кращі сітки
Сітки, створені з допомогою calc(), — кращі сітки
Сітки, створені з допомогою calc(), — кращі сітки

Потім ми застосовуємо стилі зображень:

img {
float: left;
width: calc(25% — 20px);
margin: 10px;
}

Це гарантує нам те, що ширина кожного зображення буде займати 25% від ширини батьків, за вирахуванням 20px для відступу ліворуч і праворуч. Зовнішній відступ (margin) зі значенням 10px з усіх сторін дозволить нам розташувати зображення точно по центру всередині «колонки».

Сітки, створені з допомогою calc(), — кращі сітки

Зверніть увагу на те, що зверху і знизу відстань між зображеннями таке ж, як і зліва, і справа. Помітили? Чудово.

Виражене по-іншому

Давайте ще більше абстрагуємося від цього прикладу, щоб ми могли записати наші обчислення по-іншому: width: calc(100% * 1/4 — 20px);

І знову ми отримаємо чотири прекрасні колонки з відступом 20px. Ми також можемо використовувати медіа-запити для того, щоб змінити кількість колонок залежно від ширини області перегляду (viewport):

img {
float: left;
margin: 10px;
width: calc(100% * 1 / 4 — 20px);
}
@media (max-width: 900px) {
img {
width: calc(100% * 1 / 3 — 20px);
}
}
@media (max-width: 600px) {
img {
width: calc(100% * 1 / 2 — 20px);
}
}
@media (max-width: 400px) {
img {
width: calc(100% — 20px);
}
}

Роки пристрасного захоплення повністю стерлися з пам’яті завдяки цьому невеликому прекрасного CSS правилом. Прощайте сіткові системи. Привіт calc().

Браузерна підтримка

Було б нечесно з мого боку ось так просто завершити дану навчальну статтю, не розповівши вам про те, коли і де ви можете використовувати calc(). Звичні нам гравці в світі браузерів грають в «догонялки» (IE9 майже вирвався з лав відстаючих, але все ж ігнорує calc(), коли використовується display:table). Однак, з прицілом на майбутнє, це дуже потужний CSS інструмент.

Сітки, створені з допомогою calc(), — кращі сітки