Генератор CSS Grid

Задавайте кількість стовпців та рядків, виділяйте мишкою області для розміщення елементів та копіюйте готовий CSS та HTML-код.

Шаблони
Елементи
CSS
HTML
Виділіть область на сітці мишкою, щоб розмістити елемент.

Ваша сітка створюється безпосередньо у вашому браузері. Жодні дані не завантажуються на BroBroGo.

Поширені запитання

Як розміщувати елементи на сітці?

Затисніть ліву кнопку миші та проведіть по клітинках, щоб виділити прямокутник — коли ви відпустите кнопку, він перетвориться на розміщений дочірній елемент, що охоплює ці стовпці та рядки. Кожен намальований елемент отримує власні правила grid-column та grid-row у CSS та відповідний блок div в HTML. Елементи можуть перекриватися (намальований пізніше буде зверху); використовуйте хрестик (×) на елементі, щоб видалити його.

Чи можуть стовпці та рядки мати різні розміри?

Так. Кожен рядок чи стовпець має власне поле введення розміру, де можна вказати будь-яке значення grid: 1fr, 200px, auto, min-content або minmax(120px, 1fr). Смуги з однаковими розмірами автоматично групуються у функцію repeat() для скорочення коду. Інтервали між стовпцями та рядками налаштовуються окремо і об’єднуються в єдине правило gap, якщо вони збігаються.

Що робити зі згенерованим кодом?

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

Генератор CSS Cubic BezierКеруйте двома маркерами для створення кривої плавности, порівнюйте рух точок наживо та копіюйте готове значення cubic-bezier().Генератор FlexboxНалаштовуйте flex-контейнер та його елементи за допомогою візуальних інструментів, дивіться на результат наживо та копіюйте CSS в один клік.Генератор Box ShadowКеруйте параметрами box-shadow за допомогою повзунків, комбінуйте шари для глибини та миттєво копіюйте готовий код CSS.Генератор градієнтівСтворюйте лінійні, радіальні або конічні градієнти, додавайте колірні точки, налаштовуйте напрямок та копіюйте CSS в один клік.Генератор Border RadiusЗаокруглюйте кожен кут повзунками, створюйте органічні асиметричні форми в еліптичному режимі та миттєво копіюйте CSS.Калькулятор CSS clamp()Вкажіть розміри для малих і великих екранів та отримайте адаптивне значення clamp() для плавного масштабування шрифтів, відступів чи інтервалів.