Генератор CSS Grid

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

CSS Grid Generator

Live

Columns3

Rows3

Gap12px

CSS output

display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 12px;

Key capabilities

Візуально визначте стовпці, рядки та проміжки, а потім скопіюйте код шаблону CSS Grid.
Запускається у вашому браузері
Безкоштовне використання

Як користуватися

Встановити кількість стовпців і рядків.
Налаштуйте розрив і розмір доріжки.
Скопіюйте сітку CSS.

How this tool works

Встановити кількість стовпців і рядків.
Налаштуйте розрив і розмір доріжки.
Скопіюйте сітку CSS.

Recommended settings

Спочатку скористайтеся параметрами за замовчуванням, а потім відкоригуйте, якщо потрібно

Supported formats

Text / on-page input

File size and limits

Дуже складні багатошарові попередні перегляди можуть працювати повільніше на старих телефонах.

Privacy

Генератори кольорів і CSS повністю працюють у вашому браузері. Попередній перегляд і конверсія ніколи не завантажують ваші стилі.

Common use cases

Використовуйте CSS Grid Generator, коли вам потрібно: візуально визначте стовпці, рядки та пропуски, а потім скопіюйте код шаблону CSS Grid.

Troubleshooting

Після вставлення попередній перегляд виглядає інакше

Перевірте наявність конкуруючих CSS на вашій сторінці (скидання, успадковані кольори). Спершу скопіюйте згенероване правило в ізольовану таблицю стилів.

FAQ

Це завантажує мій CSS?

Ні. Генератори та конвертери працюють у вашому браузері з попереднім переглядом.

Чи потрібен мені обліковий запис?

Ні. Відкрийте інструмент, налаштуйте елементи керування та скопіюйте CSS.