Площадка CSS Grid

Интерактивный инструмент для экспериментов со свойствами CSS Grid и просмотра эффектов в реальном времени. Настраивайте параметры сетки и автоматически генерируйте код Pure CSS, Tailwind CSS и SCSS.

Как использовать

Установите количество столбцов и строк для определения базовой структуры сетки

Настройте промежутки (gaps) для тонкой настройки макета

Добавляйте или удаляйте элементы для просмотра превью

Настройте позицию и размер отдельных элементов

Скопируйте сгенерированный код CSS, Tailwind или SCSS

Основные функции

Предварительный просмотр в реальном времени

Поддержка всех свойств CSS Grid

Генерация кода Pure CSS, Tailwind CSS и SCSS

Динамическое добавление и удаление элементов сетки

Интуитивные элементы управления с выпадающими списками

Адаптивный предварительный просмотр

Свойства контейнера Grid

Столбцы:

Строки:

Выбранный элемент

Элемент 1

Grid Column

Current: auto

Grid Row

Current: auto

Align Self

Justify Self

auto

Controls horizontal positioning within the grid cell

Align Self

auto

Controls vertical positioning within the grid cell

Свойства контейнера Grid

Промежуток между столбцами (px)

8px

0pxTight50px

Промежуток между строками (px)

8px

0pxTight50px

Align Items

Justify Items

stretch

Default horizontal alignment for all grid items

Align Items

stretch

Default vertical alignment for all grid items

Предварительный просмотр

3×3 grid

Элемент 1

Элемент 2

Элемент 3

Сгенерированный код

Pure CSS

/* Grid Container Styles */
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  column-gap: 8px;
  row-gap: 8px;
  justify-content: stretch;
  align-content: stretch;
  justify-items: stretch;
  align-items: stretch;
  grid-auto-flow: row;
}

/* Grid Item Styles */
.grid-item-1 {
  grid-column: auto;
  grid-row: auto;
  justify-self: auto;
  align-self: auto;
}

.grid-item-2 {
  grid-column: auto;
  grid-row: auto;
  justify-self: auto;
  align-self: auto;
}

.grid-item-3 {
  grid-column: auto;
  grid-row: auto;
  justify-self: auto;
  align-self: auto;
}

Часто задаваемые вопросы (FAQ)

CSS Grid — это мощная двумерная система компоновки, позволяющая размещать элементы с использованием строк и столбцов. Идеально подходит для создания сложных макетов с легкостью.

Flexbox идеален для одномерных макетов (строка или столбец), в то время как CSS Grid превосходен для двумерных макетов (строки и столбцы). Выбирайте в зависимости от требований к макету.

Да, сгенерированный код можно использовать напрямую в ваших веб-сайтах или приложениях. Вы можете выбрать из форматов Pure CSS, Tailwind CSS или SCSS.

Вы можете свободно настраивать размещение, устанавливая индивидуальные свойства grid-column и grid-row для каждого элемента сетки.

Предварительный просмотр адаптивный, но для фактической реализации адаптивного дизайна вам понадобится использовать медиа-запросы для применения различных настроек сетки для разных точек останова.