Я думаю, ви всі погодитеся, що фіксовані сітки вже вимерли, як динозаври, а їм на зміну прийшли «гумові» сітки. Але при роботі з «гумовими» сітками у мене завжди виникали якісь баги або труднощі. Наприклад, неможливо зробити так, щоб відступ / проміжок (gutter) зверху і знизу був таким же, як і відступ зліва і справа. Серйозно, спробуйте самі.
А як же Bootstrap? Не змушуйте мене розповідати, скільки зайвих елементів вам доведеться додати в вашу розмітку, щоб ваша сіткова система запрацювала - це не призведе ні до чого, крім помилок. Або взяти той факт, що вам буде потрібно ще більше елементів в розмітці, щоб задати фоновий колір для елементів. Ось приклад цієї невеликої проблеми у вигляді галереї.
Прикро, що, схоже, навіть Flexbox не може запропонувати нічого нового, крім зручного способу отцентровкі елементів по вертикалі. Після такої запаморочливої екскурсії про те, що не так з сітками на даний момент, виникає питання: «А що повинен робити той, хто обожнює використовувати сітки?»
Практичний курс по верстці адаптивного Лендінзі з нуля!
Навчіться з нуля верстати адаптивні Лендінзі на HTML5 та CSS3 за найближчі 6 днів
Зачекайте, а що це за відмінна штука? Calc ()?
Ми можемо використовувати функцію calc () в нашому CSS. Так що ж вона робить?
«За допомогою функції calc () ви можете здійснювати обчислення для визначення значень у CSS властивостей». - MDN
І не тільки це. Використовуючи calc (), ми також можемо комбінувати одиниці виміру. Це означає, що якщо нам потрібно створити сітку, що складається з чотирьох колонок, мають проміжок в 20px між ними, в кожному рядку, то ми можемо написати комбінацію процентних і піксельних значень, наприклад, width: calc (25% - 20px). Хіба це не фантастика?
Приклад. У нас є наступна розмітка - сім зображень з кошенятами всередині батьківського елементу section:
Потім ми застосовуємо стилі до зображень:
Це гарантує нам те, що ширина кожного зображення буде займати 25% від ширини батька, за вирахуванням 20px для відступу зліва і справа. Зовнішній відступ (margin) зі значенням 10px з усіх боків дозволить нам положення зображення на екрані точно по центру всередині «колонки».
Зверніть увагу на те, що зверху і знизу відстань між зображеннями таке ж, як і зліва і справа. Помітили? Прекрасно.
Виражене по-іншому
Давайте ще більше абстрагуємося від цього прикладу, щоб ми могли записати наші обчислення по-іншому: width: calc (100% * 1/4 - 20px);
Роки пристрасного захоплення повністю стерлися з пам'яті завдяки цьому невеликому прекрасному CSS правилом. Прощайте сіткові системи. Привіт calc ().
браузерна підтримка
Було б нечесно з мого боку ось так просто завершити дану навчальну статтю, що не розповівши вам про те, коли і де ви можете використовувати calc (). Звичні нам гравці в світі браузерів грають в «догонялки» (IE9 майже вирвався з лав відстаючих, але все ж ігнорує calc (), коли використовується display: table). Однак, з прицілом на майбутнє, це дуже потужний CSS інструмент.
Редакція: Команда webformyself.
Практичний курс по верстці адаптивного Лендінзі з нуля!
Навчіться з нуля верстати адаптивні Лендінзі на HTML5 та CSS3 за найближчі 6 днів
Найсвіжіші новини IT і веб-розробки на нашому Telegram-каналі
