CSS Grid із minmax() в Elementor: адаптивна сітка без breakpoint-ів

Як працює адаптивна сітка з minmax() і auto-fit

У CSS Grid ширина колонок задається через властивість grid-template-columns. Комбінація repeat(auto-fit, minmax(240px, 1fr)) означає: створити стільки колонок, скільки може поміститися в контейнері, але не робити кожну колонку вужчою за 240 пікселів.

Функція minmax() визначає мінімальне та максимальне значення ширини. У прикладі 240px — мінімальна ширина картки, а 1fr — частина доступного простору. Якщо в ряд поміщаються чотири картки, вони розподілять ширину між собою. Якщо для чотирьох карток місця вже недостатньо, одна з них автоматично перейде на наступний ряд.

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

• minmax(240px, 1fr) задає комфортний мінімум для картки.
• auto-fit автоматично підбирає кількість колонок.
• gap відповідає за проміжки між картками.
• Окремі правила для 768px або 480px можуть бути непотрібними.

Як підготувати контейнер в Elementor

Створіть контейнер, у якому розміщені картки, і використайте для нього режим Grid, якщо така опція доступна у вашій конфігурації Elementor. Важливо, щоб саме батьківський контейнер був сіткою, а картки стали його дочірніми елементами.

Додайте контейнеру CSS-клас adaptive-grid. Назва класу може бути іншою, але вона має точно збігатися з назвою в CSS. Клас зазвичай задають у налаштуваннях контейнера в секції CSS Classes. Не додавайте цей клас окремо кожній картці — він потрібен саме для спільного контейнера.

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

• Переконайтеся, що всі картки знаходяться всередині одного контейнера.
• Перевірте правильність написання класу adaptive-grid.
• Не задавайте дочірнім карткам фіксовану ширину, яка конфліктує із Grid.
• Після додавання CSS очистіть кеш сайту та браузера, якщо зміни не видно.

.adaptive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}

Як підібрати minmax() і gap для різних блоків

Число 240px не є універсальним правилом. Це мінімальна ширина, за якої вміст картки має залишатися зручним для читання. Для коротких категорій із невеликою іконкою може вистачити 180–220px. Для тарифних планів із ціною, списком переваг і кнопкою краще почати з 260–320px.

Орієнтуйтеся не лише на ширину екрана, а й на внутрішній вміст. Якщо заголовки часто переносяться на чотири або п’ять рядків, картка може виглядати незбалансовано навіть за формально правильної ширини. У такому випадку збільшіть мінімальне значення або скоротіть текст.

Відступ gap також впливає на момент перенесення елементів. Наприклад, чотири картки по 240px плюс три проміжки по 24px потребують щонайменше 1032px без урахування внутрішніх полів контейнера. Якщо доступна ширина менша, браузер зменшить кількість колонок.

• Для компактних категорій спробуйте minmax(180px, 1fr).
• Для стандартних інформаційних карток часто підходить діапазон 220–280px.
• Для тарифів і складних блоків варто використовувати більший мінімум.
• Занадто великий gap може передчасно перевести сітку з чотирьох колонок у три.

auto-fit чи auto-fill: яку функцію вибрати

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

auto-fill зберігає віртуальні колонки навіть тоді, коли для них немає елементів. Через це картки можуть залишатися вужчими, а в кінці рядка може з’являтися вільне місце. Така поведінка іноді корисна для спеціальних макетів, але для звичайних карток auto-fit зазвичай виглядає природніше.

Якщо потрібно, щоб останній ряд не розтягував картки на всю доступну ширину, можна розглянути auto-fill або додаткові правила вирівнювання. Це вже залежить від дизайну: для новинних карток розтягування часто прийнятне, а для тарифів може бути небажаним.

• Використовуйте auto-fit для гнучкої сітки, яка заповнює ряд.
• Розглядайте auto-fill, якщо важлива структура потенційних колонок.
• Перевіряйте останній ряд окремо: саме там різниця найпомітніша.

Що перевірити на планшеті та мобільному

Сітка без breakpoint-ів не означає, що її не потрібно тестувати. Браузер правильно розрахує колонки, але внутрішні відступи, фіксовані ширини та довгі слова можуть зламати макет.

Спочатку перевірте ширину самого контейнера. Якщо він має великі горизонтальні padding, на мобільному для картки залишиться значно менше місця, ніж здається за шириною viewport. Наприклад, при мінімумі 240px і сумарних внутрішніх відступах 32px картка може перейти на один стовпець раніше, ніж очікувалося.

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

• Перевірте ширину сітки разом із padding контейнера.
• Перегляньте макет на вузькому смартфоні, а не лише в стандартному desktop preview.
• Знайдіть горизонтальний скрол і визначте елемент, який його створює.
• Перевірте кнопки: текст не має виходити за межі картки.
• Переконайтеся, що між картками зберігається достатній контраст і видимий проміжок.

Типові помилки та способи їх виправити

Найчастіша помилка — фіксована ширина карток. Якщо дочірньому елементу задано width: 300px або мінімальну ширину, більшу за значення у minmax(), він може переповнювати сітку. Видаліть конфліктне правило або зробіть його сумісним із Grid.

Інша проблема — використання відсоткової ширини разом із Grid без потреби. Grid уже розподіляє доступний простір між колонками, тому ручне width: 33.333% для карток може спричинити зайві переноси та переповнення.

Також перевірте стилі, успадковані від flex-контейнера. Властивості flex-basis, flex-grow і flex-shrink не керують колонками Grid, але інші правила, наприклад min-width або великі margin, можуть впливати на результат.

Якщо елементи не переносяться, перевірте, чи CSS-клас застосований до правильного контейнера, чи не перекрито display: grid іншим правилом і чи завантажилася оновлена версія стилів.

• Не задавайте карткам фіксовану ширину без чіткої причини.
• Перевірте min-width, margin і padding дочірніх елементів.
• Не змішуйте без потреби Grid на батьківському рівні та ручні відсоткові ширини карток.
• У DevTools браузера перевірте, яке CSS-правило фактично застосовується.

Коли breakpoint-и все ж потрібні

CSS Grid із minmax() добре вирішує завдання автоматичного перенесення карток, але не замінює всі адаптивні налаштування. Breakpoint може бути доречним, якщо на різних пристроях потрібно змінити не лише кількість колонок, а й дизайн компонента.

Наприклад, на мобільному тарифні картки можуть потребувати іншого порядку блоків, меншого шрифту, прихованого опису або кнопки на всю ширину. Такі зміни не належать до відповідальності Grid і потребують окремих CSS-правил або адаптивних налаштувань Elementor.

Не варто додавати breakpoint лише для того, щоб вручну встановити одну, дві чи три колонки. Якщо елементи мають однакову структуру, minmax() та auto-fit зазвичай роблять це точніше й із меншим обсягом коду.

• Залишайте Grid без breakpoint-ів для однотипних карток.
• Використовуйте breakpoint-и, коли змінюється структура або типографіка компонента.
• Оцінюйте не тільки кількість колонок, а й читабельність та зручність взаємодії.