Генератор сіток
Створюйте складні CSS Grid макети з живим превʼю та експортом коду
Перетягуй картки в превʼю, щоб закріпити їх у потрібних клітинках.
Стек елементів
Елементи сітки
Затисни точки і перетягни елементи сітки вище або нижче, щоб змінити порядок.
Item 1
Item 2
<div class="grid-container">
<div class="grid-item-1">Item 1</div>
<div class="grid-item-2">Item 2</div>
</div>.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
column-gap: 16px;
row-gap: 16px;
grid-auto-flow: row;
justify-items: stretch;
align-items: stretch;
justify-content: start;
align-content: start;
}
.grid-item-1 {
grid-column: 1 / 2;
grid-row: 1 / 2;
background-color: #667eea;
}
.grid-item-2 {
grid-column: 2 / 4;
grid-row: 1 / 3;
background-color: #764ba2;
}Розблокуйте Pro функції для команди
Отримайте доступ до API, пріоритетну підтримку та розширені опції експорту. Ідеально для агенцій та продуктових команд.
Повний доступ до API
Пріоритетна підтримка
Командна співпраця
Розширені експорти
Можливості CSS Grid Generator
- Візуальний конструктор — Створюйте складні сіткові макети за допомогою інтуїтивного візуального інтерфейсу. Бачте зміни в реальному часі під час налаштування колонок та рядків.
- Гнучкі одиниці виміру — Використовуйте fr, px, %, auto, min-content, max-content та інші одиниці виміру. Комбінуйте їх для створення адаптивних макетів.
- Grid Template Areas — Визначайте іменовані області сітки для семантичного розміщення контенту. Створюйте складні макети з легкістю та читабельністю.
- Gap і проміжки — Налаштовуйте відстані між колонками та рядками окремо або разом. Підтримка нових властивостей gap замість застарілих grid-gap.
- Auto-placement — Автоматичне розміщення елементів у сітці з контролем напрямку потоку. Налаштуйте щільність упаковки для оптимального використання простору.
- Готові шаблони — Колекція популярних макетів: Holy Grail, картки, галереї, дашборди. Використовуйте як стартову точку для вашого проекту.
Як використовувати Grid Generator
- Визначте кількість колонок та рядків для вашої сітки
- Налаштуйте розміри кожної колонки та рядка за допомогою відповідних одиниць
- Додайте проміжки між елементами через властивості gap
- Розмістіть елементи в сітці, вказавши їх позиції
- Використовуйте іменовані області для семантичного розміщення
- Скопіюйте згенерований CSS та HTML код для використання в проекті
Чому варто використовувати CSS Grid
CSS Grid - це найпотужніша система макетування в CSS, яка дозволяє створювати двовимірні макети з повним контролем над рядками та колонками. На відміну від Flexbox, Grid ідеально підходить для створення складних макетів сторінок, дашбордів та адаптивних інтерфейсів. Grid автоматично керує вирівнюванням, підтримує накладання елементів та значно спрощує створення респонсивних дизайнів без медіа-запитів.
Часті питання про CSS Grid
Grid призначений для двовимірних макетів (рядки і колонки), тоді як Flexbox - для одновимірних (тільки рядок або тільки колонка). Grid краще для загальної структури сторінки, Flexbox - для компонентів.
Сучасні версії всіх браузерів повністю підтримують CSS Grid. IE11 підтримує стару специфікацію з префіксом -ms-, але з обмеженнями. Для критичних проектів використовуйте Flexbox як fallback.
Fr (fraction) представляє частку вільного простору в контейнері сітки. 1fr 1fr 1fr створить три рівні колонки, які займуть весь доступний простір.
Використовуйте функції minmax(), auto-fit та auto-fill для автоматичної адаптації. Також можна використовувати медіа-запити для зміни grid-template-columns на різних екранах.