Генератор Flexbox і Grid

Як користуватися генератором Flexbox і Grid

1. Виберіть Макет: Flexbox або Grid, або почніть із Шаблони (По центру, Панель навігації, Картки з перенесенням, Бічна панель, Адаптивна сітка карток, Святий Грааль, 12 колонок).
2. Задайте властивості розділу Контейнер. Для flexbox: flex-direction і flex-wrap. Для grid: grid-template-columns, grid-template-rows, grid-auto-flow, justify-items і grid-template-areas. Спільні для обох: justify-content, align-items, align-content, row-gap (px) і column-gap (px).
3. Керуйте розділом Елементи кнопками Додати елемент, Видалити вибраний елемент і Скинути вибраний елемент. Клацніть елемент у попередньому перегляді (або перейдіть до нього клавішею Tab і натисніть Enter), щоб вибрати його.
4. Редагуйте вибраний елемент: order і align-self в обох режимах, flex-grow, flex-shrink і flex-basis для flexbox та grid-area, grid-column, grid-row і justify-self для grid.
5. Скопіюйте CSS-код і відповідний HTML-код кнопками Копіювати.

Кожен елемент керування – стандартне поле форми, тож усім генератором можна користуватися лише з клавіатури. CSS містить тільки ті властивості, які ви змінили порівняно зі значеннями за замовчуванням, тому він короткий, а елементи з однаковими налаштуваннями мають одне правило (.item, коли збігаються всі).

Інструмент працює у вашому браузері. Нічого з того, що ви вводите, не надсилається на сервер.

Flexbox коротко

Flexbox розташовує елементи вздовж однієї осі. flex-direction задає головну вісь (рядок чи стовпець); justify-content розподіляє елементи вздовж неї (center, space-between…), а align-items розташовує їх на поперечній осі. З flex-wrap: wrap елементи, що не вміщуються, переходять на новий рядок, а align-content тоді розподіляє ці рядки.

Кожен елемент має три властивості розміру, які зазвичай пишуть разом як flex:

• flex-basis: початковий розмір (auto бере вміст або width);
• flex-grow: яку частку вільного місця займає елемент (0 – жодної, 1 – рівну частку);
• flex-shrink: наскільки він поступається місцем, коли його бракує (0 – ніколи не стискається).

Шаблон Бічна панель показує класичний підхід: бічна панель із flex-basis: 200px і flex-shrink: 0 та основна область із flex-grow: 1.

CSS Grid коротко

Grid розташовує елементи у двох вимірах. grid-template-columns: repeat(3, 1fr) створює три рівні колонки; fr – це частка вільного місця. repeat(auto-fill, minmax(120px, 1fr)) створює стільки колонок завширшки щонайменше 120px, скільки вміститься, що дає адаптивну сітку карток без жодного медіазапиту.

Елементи заповнюють клітинки по черзі, якщо ви їх не розмістите: grid-column: span 2 робить елемент шириною у дві колонки, а grid-column: 1 / -1 розтягує його на весь рядок.

grid-template-areas дозволяє малювати макет іменами. Введіть по одному рядку на рядок макета, наприклад header header, потім nav main, і задайте елементам grid-area: header чи grid-area: main. Крапка позначає порожню клітинку. У кожному рядку має бути однакова кількість клітинок, а кожна назва має утворювати прямокутник; інакше інструмент попередить вас.