Песочница CSS Flexbox и Grid

Что такое Песочница CSS Flexbox и Grid?

Песочница CSS Flexbox и Grid — это бесплатная визуальная среда для изучения и прототипирования двух основных моделей раскладки CSS, созданная для фронтенд-разработчиков, учащихся и дизайнеров. Выберите Flex или Grid, задайте свойства контейнера и откройте «Настройки», чтобы задать стиль отдельным дочерним элементам: order, flex-grow, flex-shrink, flex-basis и align-self в режиме Flex или span столбца/строки и align-self в режиме Grid. В режиме Grid также есть произвольные размеры дорожек — введите любое значение grid-template-columns/rows, например 200px 1fr или repeat(auto-fit, minmax(120px, 1fr)) — и визуальный редактор grid-template-areas, где вы называете каждую ячейку, что создаёт и именованные линии сетки. Живой предпросмотр из пронумерованных плиток отражает каждое изменение, и вы можете экспортировать только правило .container или контейнер вместе с CSS для элементов.

Как пользоваться Песочница CSS Flexbox и Grid

1. Выберите Flex или Grid переключателем режима, чтобы решить, какую модель раскладки строить.
2. Задайте свойства контейнера — flex-direction/wrap и justify/align, либо число столбцов и строк с justify-items/align-items.
3. Откройте «Настройки», чтобы изменить gap и число элементов и задать стиль каждому дочернему элементу (order, flex-grow/shrink/basis, align-self или span столбца/строки).
4. В Grid переключите размер дорожек на «Свои», чтобы ввести собственные grid-template-columns/rows — px, fr, minmax() или repeat(auto-fit/auto-fill, …).
5. Включите редактор grid-template-areas и назовите каждую ячейку, чтобы размещать элементы по областям.
6. Выберите экспорт только CSS контейнера или контейнера вместе с CSS для элементов и скопируйте результат.

Примеры

Flex · direction row · justify-content center · align-items center · gap 12

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

Grid · custom columns: repeat(auto-fit, minmax(120px, 1fr)) · gap 16

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  grid-template-rows: repeat(2, 1fr);
  justify-items: start;
  align-items: stretch;
  gap: 16px;
}

Grid · areas: header row, sidebar + main, footer row

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
  justify-items: start;
  align-items: stretch;
  gap: 16px;
}

Flex · export container + items · item 2 flex-grow 1

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 12px;
}

.container > :nth-child(2) {
  flex-grow: 1;
}

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

В чём здесь разница между Flexbox и Grid?

Режим Flex располагает элементы вдоль одной оси и предоставляет flex-direction, flex-wrap, justify-content и align-items. Режим Grid размещает их в двух измерениях с помощью grid-template-columns и grid-template-rows плюс justify-items и align-items. Переключайте режим, чтобы сравнить, как каждый обрабатывает одно и то же выравнивание.

Как задать стиль отдельным элементам?

Откройте «Настройки» и с помощью поэлементных настроек задайте order, flex-grow, flex-shrink, flex-basis и align-self (Flex) или span столбца/строки и align-self (Grid) для каждого дочернего элемента. Установите «Экспорт» в «Контейнер + элементы», и инструмент добавит правило .container > :nth-child(n) для каждого настроенного элемента.

Можно ли использовать свои размеры дорожек, например auto-fit или minmax()?

Да. В режиме Grid переключите размер дорожек на «Свои» и введите любое корректное значение grid-template-columns/rows — пиксели, единицы fr, minmax() или repeat(auto-fit/auto-fill, minmax(120px, 1fr)) для адаптивных столбцов. Предпросмотр и сгенерированный CSS обновляются по мере ввода.

Что делает редактор grid-template-areas?

Включите его в режиме Grid и назовите каждую ячейку сетки; инструмент собирает объявление grid-template-areas, а пустые ячейки становятся точкой. Именование областей создаёт и именованные линии сетки, а поместить дочерний элемент в область можно, введя её имя в поле grid-area этого элемента.

Загружаются ли мои данные куда-либо?

Нет. Песочница работает полностью в вашем браузере на JavaScript, поэтому ваши настройки и сгенерированный CSS никогда не отправляются на сервер. Она работает приватно и даже офлайн после загрузки страницы.