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

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

Песочница CSS Flexbox и Grid — это бесплатная визуальная среда для изучения и прототипирования двух основных моделей раскладки CSS, созданная для фронтенд-разработчиков, учащихся и дизайнеров. Выберите Flex или Grid переключателем режима, затем задайте свойства контейнера с помощью простых выпадающих списков и числовых полей: в режиме Flex вы управляете flex-direction, flex-wrap, justify-content и align-items; в режиме Grid вы указываете количество столбцов и строк (отображаемых как repeat(n, 1fr)), а также justify-items и align-items. Значение gap и количество элементов применяются к обоим режимам. Живой предпросмотр из пронумерованных плиток точно показывает, как ведут себя ваше выравнивание и отступы, а полное правило .container CSS генерируется для копирования. Обращайтесь к ней всякий раз, когда хотите увидеть, как на самом деле выглядит настройка flex или grid, прежде чем вставлять её в свой проект.

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

1. Выберите Flex или Grid переключателем режима, чтобы решить, какую модель раскладки строить.
2. В режиме Flex задайте flex-direction, flex-wrap, justify-content и align-items из выпадающих списков.
3. В режиме Grid задайте количество столбцов и строк, а также justify-items и align-items.
4. Откройте «Настройки», чтобы изменить gap (отступ в px) и количество элементов, показываемых в предпросмотре.
5. Наблюдайте, как живой предпросмотр плиток перестраивается при изменении каждого свойства.
6. Скопируйте сгенерированное правило .container 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 · columns 3 · rows 2 · justify-items start · align-items stretch · gap 16

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

Flex · direction column · justify-content space-between · align-items stretch · gap 8

.container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
  gap: 8px;
}

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

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

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

Что делает значение gap?

gap задаёт расстояние в пикселях между каждым элементом как в раскладках Flex, так и в Grid через CSS-свойство gap. Увеличьте его, чтобы раздвинуть плитки, или установите 0 для вплотную прилегающей раскладки; предпросмотр и сгенерированный CSS обновляются мгновенно.

Почему justify-content и align-items пишутся в Grid по-другому?

Grid использует для justify-items и align-items ключевые слова start, end, center и stretch, тогда как Flex использует flex-start и flex-end. Инструмент выводит правильные ключевые слова для того режима, в котором вы находитесь, поэтому скопированный CSS всегда корректен.

Можно ли изменить количество показываемых элементов?

Да. Откройте «Настройки» и измените количество элементов, чтобы добавить или убрать пронумерованные плитки предпросмотра (до 24). Это влияет только на демонстрацию на экране; сгенерированный CSS описывает контейнер, а не сами элементы.

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

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