Думаю не стоит объяснять насколько важно понимать и использовать эти 2 технологии в работе с сайтом, поэтому давайте сразу перейдем к разбору.
Итак, начнем с Flexbox. Технология переводится как "гибкий".
В основе лежит идея оси. Флекс-контейнер состоит из контейнера и элементов. Элементы могут выстраиваться в строку или столбцы. Но не строки и столбцы одновременно.
Зачем нам нужен Flexbox?
1. Он помогает располагать элементы в одном из 4 направлений(слево направо, справа налево, сверху вниз или снизу вверх.
2. Переопределять порядок элементов.
3. Определять размеры элементов. Чтобы они вписывались в доступное пространство.
4. Горизонтальное и вертикальное центрированием.
5. Переносить элементы внутри контейнера.
6. Создавать колонки одинаковой высоты.
7. Создавать подвал сайта.
Где мы можем использовать Flexbox?
⁃ Одномерные макеты, навигационная панель.
⁃ Навигация по сайту. В 90% случаев навигация по сайту должна быть построена с помощью CSS Flexbox. Самый распространенный шаблон — это логотип слева и навигация справа. Это идеально подходит для flexbox.
⁃ Список действий. Пример списка действий — это то, что мы можем позаимствовать у Facebook или Twitter. Список действий состоит из кнопок действий, которые может выполнять пользователь.
⁃ Элементы формы.
⁃ Комбинация поля ввода и кнопки рядом с ним — идеальный вариант использования Flexbox.
⁃ Компоненты карточек. Компонент карточек имеет множество вариаций.
⁃ Вкладки (Tabs) / Нижнее меню. Когда дело доходит до элементов, которые занимают всю ширину экрана и имеют элементы, которые должны заполнять все доступное пространство, тогда flexbox — идеальный инструмент.
⁃ Список возможностей.
С помощью flexbox, есть возможность менять направление элементов на противоположное. Flex- контейнер устанавливает новый гибкий контекст форматирования для его содержимого. Flex- контейнер не является блочным контейнером. После установки display: flex каждый дочерний элемент. Становится flex — элементом. Блочный и строчные элементы ведут себя одинаково и ширина блоков равно ширина их содержимого.
А что Grid?
Grid — еще одна технология для создания веб-сайтов.
Модель Grid позволяет нам размещать содержимое нашего веб-сайта. Мало того, это помогает нам создавать структуры, необходимые для создания адаптивных веб-сайтов для нескольких устройств.
Как работает грид-архитектура? Элементы сетки распределены по главной оси и поперечной оси. Используя различные свойства сетки, мы управляем элементами для создания макетов нашего веб-сайта.
Таким образом, гриды в основном используются для построения сетки всего интерфейса. Флексы же — для расположения элементов внутри сетки.
Как там говорится, гриды — для каркаса сайта, флексы — для контента.
Ещё примеры использования Grid:
1.Основной контент и боковая панель.
Если у вас есть боковая панель и основной контент, CSS-сетка — это идеальное решение для их построения.
2.Сетка карточек.
Как уже говорилось в начале статьи, CSS-Grid самоочевидна по своему названию, поэтому ее использование для разметки сеток карточек является идеальным вариантом.
3.Макет раздела.
В следующем дизайне мы можем использовать сетку дважды, первый раз — разделить область на две части (боковая панель «Свяжитесь с нами» и форма), а второй — для сетки самой формы.
А еще, grid и flexbox можно сочетать.
Каждый модуль макета не только имеет свои варианты использования, но мы можем использовать оба из них. Например писок карточек. Сетка используется для размещения карточек, а flexbox — для самого компонента карточки.
Какой итог? Больше практики, господа. Эксперементируйте с применением технологий. Нет единых правил в этом вопросе, есть лишь рекомендации и пожелания. Важно чтобы ваш код был понятным и адекватным ситуации.