Мобильная версияДля страниц с одномерным макетом имеет смысл использовать flex.
Вышеуказанный макет представляет собой одномерный страница.
Это обычно можно увидеть на сайтах, рекламирующих компании или продукты, например на страницах брендов.
Поэтому очевидно, что полезно использовать гибкую настройку направления столбцов для разработки базового макета.
Однако многие другие сайты обычно иметь двухмерный макет, а не одномерный.
В большинстве случаев вверху находится область заголовка, а в центре — боковое навигационное меню (или боковое содержимое) и область основного содержимого. А внизу есть область нижнего колонтитула, как на изображении выше.
Когда я впервые узнал о сетке, я услышал, что она очень эффективна при разработке макетов с двухмерной структурой. Я также слышал, что базовый макет веб-сайта можно создать с использованием сетки. Что ж... макет выше также может быть спроектирован как в виде сетки, так и в гибком стиле.
Однако я проанализировал макет CSS нескольких веб-сайтов с боковыми меню с помощью инструментов разработчика Chrome, но не смог найти единственный пример использования сетки в макете сайта. Все макеты были разработаны с использованием гибких и вложенных элементов div. Использование Grid на самом деле ограничивается реальным пользовательским интерфейсом в форме сетки, например галереями изображений.
(Только для веб-сайтов, которые я проверял на данный момент)
Почему обычно для базовый макет вашего сайта? Я думаю, причина в том, что в ситуации, когда доступны и flex, и Grid, легче разработать гибкий вариант, который проще в использовании.
Ну... Я слышал, что Grid есть проблема, которая плохо поддерживается в старых версиях браузеров, но похоже, что большинство пользователей редко используют старые версии браузеров, которые не очень хорошо поддерживают сетку. Так что я не думаю, что это основная причина использования гибкой сетки вместо сетки.
Подробнее здесь: https://stackoverflow.com/questions/785 ... sic-layout
