Дизайн · Безкоштовно

Генератор CSS Grid

Створіть попередній перегляд сітки й CSS зі стовпців, рядків і відступів.

01Введіть значення

Працює у браузері

—

Працює у браузері

Створіть попередній перегляд сітки й CSS зі стовпців, рядків і відступів.

Працює у браузері

Дані обробляються на цій сторінці й не надсилаються на сервер.

Про інструмент

Створіть CSS Grid з рівними стовпцями й адаптуйте код до сторінки.

Введіть значення
Стовпці · Рядки · Проміжок
Обчислити / створити
Створіть попередній перегляд сітки й CSS зі стовпців, рядків і відступів.
Результат
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(80px, auto)); gap: 16px;

Створіть CSS Grid з рівними стовпцями й адаптуйте код до сторінки.

Приклад

Результат

display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: repeat(2, minmax(80px, auto));
gap: 16px;

Як тлумачити результат?

Створіть CSS Grid з рівними стовпцями й адаптуйте код до сторінки.

Куди потрапляють мої дані?

Обчислення виконуються на пристрої. Дані не надсилаються на сервер.