Пісочниця 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 ніколи не надсилаються на сервер. Вона працює приватно й навіть офлайн після завантаження сторінки.