Flexbox или Grid: как разложить карточки на странице

Начните с того, что должно выравниваться

Для меню обычно важен один ряд: логотип слева, ссылки рядом, кнопка справа. Для каталога важны сразу строки и столбцы: карточки должны совпадать по колонкам. Flexbox удобно управляет одной осью, Grid задаёт двумерную сетку. Flexbox тоже умеет переносить элементы, но новая строка рассчитывает свободное место независимо.

Один проект спокойно использует оба инструмента: внешняя сетка карточек на Grid, а строка кнопок внутри каждой — на Flexbox. Выбирать один способ для всего сайта не требуется.

Ряд действий на Flexbox

gap задаёт промежутки между элементами, wrap разрешает перенос. Если суммарная ширина кнопок слишком велика, появится новая строка. Не рассчитывайте, что длинная надпись всегда поместится: проверьте её отдельно.

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

Адаптивные карточки на Grid

repeat с auto-fit создаёт столько колонок, сколько поместится. minmax задаёт нижнюю границу ширины и распределяет оставшееся пространство. Вложенный min не даёт минимуму 240px вытолкнуть сетку за очень узкий контейнер.

.projects {
  display: grid;
  grid-template-columns:
    repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 24px;
}

Сравните поведение, а не названия

Соберите пять карточек: последняя строка будет неполной. Затем сделайте описание одной карточки значительно длиннее. Посмотрите, сохраняются ли нужные границы столбцов и где оказываются кнопки. Такой пример быстрее показывает различие раскладок, чем пустые квадраты одинакового размера.

Если появился горизонтальный скролл

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

Практика: добавьте длинный адрес в карточку и проверьте перенос. Для текстовых ссылок может понадобиться overflow-wrap:anywhere, для изображений — max-width:100%. В редакторе ZIPKA переключайте раскладку и меняйте параметры по одному, сохраняя понятный ожидаемый результат.