CSS Grid-пісочниця
Будуйте й переглядайте макети CSS Grid у реальному часі — конструктор, ручне введення, пресети, миттєве копіювання
Налаштування
Живий перегляд
—
Як працює CSS Grid-пісочниця
Будуйте макети CSS Grid візуально або вручну кодом. Почніть із пресетів, налаштовуйте в реальному часі й копіюйте готовий до продакшну CSS.
Візуальний конструктор
Задавайте рядки, колонки й проміжки візуально. Тягніть повзунки або вводьте точні значення — сітка оновлюється в реальному часі. Щоб почати, знання CSS не потрібні.
Ручне введення CSS
Перемкніться в ручний режим і пишіть grid-template-columns, grid-template-rows та gap самостійно. Перегляд показує результат просто під час набору.
Бібліотека пресетів
Почніть із поширених шаблонів макетів — «святий Грааль», бічна панель, дашборд, сітка карток тощо. Кожен пресет генерує код, який можна редагувати під себе.
Копіювати CSS
Копіюйте згенерований код CSS Grid в один клік. Код чистий, готовий до продакшну й використовує сучасний синтаксис grid, сумісний з усіма основними браузерами.
Часті запитання
CSS Grid — двовимірна система макетів, вбудована в CSS. Вона дає змогу задати рядки й колонки та розміщувати елементи в клітинках без float і хитрощів із позиціонуванням. Grid підтримують усі сучасні браузери, і це стандарт для складних макетів сторінок.
Grid — для двовимірних макетів, де потрібно керувати і рядками, і колонками одночасно: дашборди, сітки карток, шаблони сторінок. Flexbox — для вирівнювання в одному вимірі: панелі навігації, групи кнопок, рядкові елементи.
Так. Елемент сітки може сам бути grid-контейнером. Це типово для дашбордів: уся сторінка — сітка, а окремі панелі мають власні вкладені сітки для внутрішнього макета.
Одиниця fr означає «частка вільного простору» (fraction). 1fr 2fr — друга колонка отримує вдвічі більше місця, ніж перша. Це найгнучкіший спосіб задавати розміри доріжок сітки без ручного обчислення відсотків.