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