Flexbox или Grid?

Теперь вы знаете два способа раскладки элементов. Когда какой использовать?

• Flexbox раскладывает элементы в одном направлении: в строку или в столбец. Размеры берутся из содержимого: каждый элемент занимает столько места, сколько ему нужно, а свободное место можно распределить с помощью justify-content или flex: 1. Это идеальный выбор для ряда ссылок или кнопок, для заголовка со ссылкой рядом.
• Grid раскладывает элементы сразу в двух направлениях: в строках и столбцах. Структура задаётся контейнером: сначала мы рисуем столбцы или области, а потом помещаем в них элементы. Это идеальный выбор для галерей, карточек и макета целой страницы.

Карточки можно было бы разложить и с помощью flexbox и flex-wrap. Но каждая строка флекс-контейнера раскладывается сама по себе: если карточки растягиваются свойством flex-grow: 1, то карточки в более короткой последней строке получатся шире, чем те, что над ними. В сетке каждая карточка остаётся в своём столбце.

Эти два способа часто сочетают: сетка для макета страницы, flexbox для мелких частей внутри неё. Элемент сетки может одновременно быть флекс-контейнером, и наоборот.

Наш подвал — хороший пример. Он является элементом сетки (находится в области footer), а внутри него два элемента, которые должны стоять рядом: источник и ссылка наверх. Это одно направление, так что здесь работа для flexbox.