Developer Tools
Design Tools
Web UtilitiesCSS Grid Playground
Создавайте макеты CSS Grid визуально с предпросмотром в реальном времени, поддержкой шаблонных областей и мгновенным выводом CSS-кода. Настраивайте столбцы, строки, отступы и размещение элементов интерактивно.
Пресеты
Свойства контейнера
Свойства элемента
Предпросмотр
CSS контейнера
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 80px);
gap: 8px;
}CSS элементов
.grid-item-1 {
}
.grid-item-2 {
}
.grid-item-3 {
}
.grid-item-4 {
}
.grid-item-5 {
}Похожие инструменты
О CSS Grid Playground
Как это работает
- Настройте свойства контейнера: grid-template-columns, grid-template-rows, gap, justify-items, align-items, justify-content и align-content
- Добавьте до 8 элементов сетки и разместите каждый с помощью grid-column-start/end и grid-row-start/end
- Используйте нотацию span (напр. span 2) или явные номера линий в полях шаблона
- Просматривайте макет в реальном времени — нажмите на любой элемент в предпросмотре для его выбора
- Применяйте пресеты для стандартных макетов (Holy Grail, Dashboard, Card Grid) и настраивайте дальше
- Копируйте сгенерированный CSS для контейнера и элементов прямо в свой проект
Распространённые случаи использования
- Интерактивное изучение свойств CSS Grid с мгновенной визуальной обратной связью
- Прототипирование макетов страниц: шапки, боковые панели, дашборды, сетки карточек
- Отладка проблем с размещением в сетке путём визуальной настройки номеров линий
- Генерация базового CSS сетки для стандартных шаблонов макетов
- Обучение CSS Grid студентов и коллег
Часто задаваемые вопросы
Что такое CSS Grid Playground?
CSS Grid Playground — это интерактивный браузерный инструмент, позволяющий визуально настраивать все свойства контейнера и элементов CSS Grid. Изменения мгновенно отображаются в предпросмотре, а готовый к использованию CSS-код генерируется автоматически.
Какие свойства контейнера можно настроить?
Вы можете настроить grid-template-columns, grid-template-rows, gap (или отдельно column-gap и row-gap), justify-items, align-items, justify-content и align-content. Все значения поддерживают любой допустимый CSS-синтаксис, включая единицы fr, repeat(), minmax() и auto.
Как разместить элемент на конкретных линиях?
Выберите элемент с помощью его пронумерованной вкладки в панели «Свойства элемента», затем задайте grid-column-start, grid-column-end, grid-row-start и grid-row-end. Введите число для явной линии сетки или оставьте значение 'auto' для автоматического размещения.
Что такое пресеты и как ими пользоваться?
Пресеты — это готовые конфигурации сетки для распространённых макетов: «Holy Grail» создаёт классический макет с шапкой/навигацией/основным/боковым/подвалом, «Sidebar + Main» строит двухколоночный макет с боковой панелью, «3-Col Masonry» демонстрирует элементы с объединением, «Dashboard» показывает четырёхколоночный дашборд, «Blog Layout» настраивает типичную статью с боковой панелью, а «Card Grid» создаёт равномерную сетку карточек в три столбца.
Какие значения принимает grid-template-columns?
grid-template-columns принимает любой допустимый список трека CSS: фиксированные длины, например '200px 1fr', функцию repeat() как 'repeat(3, 1fr)', minmax() как 'repeat(3, minmax(100px, 1fr))', auto-fill или auto-fit, а также именованные линии.
В чём разница между единицами fr и пикселями?
Единица fr (дробная) представляет долю доступного пространства в контейнере сетки. '1fr 1fr 1fr' делит пространство равномерно на три столбца. '2fr 1fr' даёт первому столбцу вдвое больше места. Значения в пикселях фиксированы независимо от размера контейнера.
Что делает justify-items в отличие от justify-content?
justify-items управляет выравниванием элементов внутри их ячеек сетки вдоль строчной оси. justify-content управляет выравниванием всей сетки внутри контейнера при наличии дополнительного пространства. Аналогично, align-items выравнивает элементы внутри ячеек по блочной оси, а align-content выравнивает всю сетку вертикально.
Что такое justify-self и align-self для элементов сетки?
justify-self переопределяет justify-items для отдельного элемента сетки, управляя его строчным выравниванием внутри ячейки. align-self переопределяет align-items для отдельного элемента, управляя его блочным выравниванием. Оба принимают: auto, start, end, center и stretch.
Как сделать так, чтобы элемент занимал несколько столбцов или строк?
Установите grid-column-start и grid-column-end (или grid-row-start и grid-row-end) для создания объединения. Например, чтобы охватить столбцы с 1 по 3, установите start=1 и end=3. Также можно оставить start как 'auto' и задать end равным 'span 2', чтобы охватить два трека.
Сколько элементов сетки можно добавить?
Вы можете добавить до 8 элементов сетки. Нажмите кнопку «+ Добавить элемент», чтобы добавить ещё. Каждый элемент имеет цветовую кодировку, чтобы вы могли его идентифицировать в панели настроек и предпросмотре.
Можно ли использовать разные отступы для столбцов и строк?
Да. По умолчанию одно значение gap применяется как к столбцам, так и к строкам. Отметьте опцию «Использовать отдельные отступы для столбцов/строк», чтобы задать column-gap и row-gap независимо с помощью отдельных ползунков.
Как скопировать сгенерированный CSS?
Доступны две кнопки копирования: одна для CSS-блока контейнера (.grid-container) и одна для всего CSS, включая правила элементов. Нажмите любую кнопку «Копировать CSS», чтобы скопировать код в буфер обмена.