Flexbox / Grid

Выберите flex-direction, justify-content, выравнивание, перенос и gap (или колонки и gap для Grid) и смотрите, как раскладка меняется вживую, затем копируйте CSS.

Как пользоваться

1. Выберите Flexbox или Grid
2. Настройте направление, выравнивание, перенос/колонки и gap
3. Смотрите, как блоки перестраиваются в живом превью
4. Скопируйте сгенерированный CSS для .container

Частые вопросы

Flexbox или Grid — что выбрать?

Flexbox лучше для одномерных раскладок (строка или колонка); Grid силён в двумерных раскладках со строками и колонками.

Что контролируют justify и align?

Во flex justify-content располагает элементы по главной оси, align-items — по поперечной; в grid используются justify-items/align-items для ячеек.

CSS готов к вставке?

Да — вывод рассчитан на класс .container, который можно сразу вставить в таблицу стилей.