Flex или grid что лучше
CSS Grid и Flexbox: сравнение на практике
Ещё недавно макет для всех страниц HTML верстался с помощью таблиц, float и других свойств CSS, которые не очень хорошо подходят для стилизации сложных веб-страниц.
Затем появился Flexbox — режим вёрстки, который был специально разработан для создания надёжных адаптивных страниц. Flexbox упростил правильное выравнивание элементов и их содержимого и теперь является предпочтительной системой CSS для большинства веб-разработчиков.
Но теперь у нас есть новый претендент на титул за звание «лучшей системы для вёрстки макетов HTML» (название титула ещё в процессе разработки»). Это CSS Grid и в ближайшее время эта система будет доступна в браузерах Firefox 52 и Chrome 57, а вскоре, как я надеюсь, и в других браузерах.
Базовый макет
Чтобы понять, каково это — создавать макеты на каждой системе, мы сделаем одну и ту же HTML-страницу дважды — один раз с помощью Flexbox, а затем на CSS Grid. Вы можете скачать оба проекта отсюда или проверить их в этой демонстрационной версии.
Уменьшенный макет веб-страницы
Дизайн довольно простой — он состоит из выровненного по центру контейнера, внутри которого у нас есть шапка, основной раздел, боковая панель и подвал. Вот главные «испытания», которые мы должны провести, сохраняя CSS и HTML по возможности чистыми:
Как вы можете видеть, ради сравнения мы оставили всё максимально простым. Начнём с первого испытания.
Испытание 1. Размещение разделов страницы
Решение на Flexbox
Добавляем display: flex к контейнеру и задаём направление дочерних элементов по вертикали. Это позиционирует все разделы друг под другом.
Теперь нам нужно сделать так, чтобы основной раздел и боковая панель располагались рядом. Поскольку flex-контейнеры обычно однонаправлены, нам нужно добавить дополнительный элемент.
Затем мы устанавливаем этому элементу display: flex и flex-direction с противоположным направлением.
Последний шаг — задать размеры основного раздела и боковой панели. Мы хотим, чтобы основное содержимое было в три раза шире боковой панели, что несложно сделать с помощью flex или процентов.
Как вы можете видеть, Flexbox сделал всё хорошо, но нам кроме этого понадобилось довольно много свойств CSS плюс дополнительный элемент HTML. Давайте посмотрим, как будет работать CSS Grid.
Решение на CSS Grid
Теперь мы можем настроить нашу сетку и определить расположение каждой области. Вначале код может показаться довольно сложным, но как только вы познакомитесь с системой сетки, он становится проще для понимания.
Испытание 2. Делаем страницу адаптивной
Решение на Flexbox
Наша страница довольно простая, поэтому в медиа-запросе мало работы, но в более сложном макете придётся много чего переделывать.
Решение на CSS Grid
Или можем переопределить весь макет с нуля, если считаем, что это решение чище.
Испытание 3. Выравнивание компонентов шапки
Наша шапка включает некоторые ссылки навигации и кнопку. Мы хотим, чтобы навигация была слева, а кнопка справа. Ссылки внутри навигации должны быть выровнены относительно друг друга.
Решение на Flexbox
Мы уже делали похожий макет на Flexbox в одной из наших старых статей — Простейший способ создания адаптивной шапки. Техника довольно простая:
Только две строки! Совсем неплохо. Давайте посмотрим, как с этим справится CSS Grid.
Решение на CSS Grid
Чтобы разделить навигацию и кнопку, мы должны добавить display: grid к header и настроить двухколоночную сетку. Нам также понадобятся две дополнительные строки в CSS, чтобы позиционировать всё на соответствующих границах.
Что касается ссылок в одну строку внутри навигации, у нас не получилось сделать это корректно с CSS Grid. Вот как выглядит наша лучшая попытка:
Понятно, что CSS Grid не справилась с этой частью макета, но это и не удивительно — основное внимание уделяется выравниванию контейнеров, а не содержимому внутри них. Эта система не для нанесения последних штрихов.
Выводы
Если вы прочитали статью целиком (а это отличная работа!), выводы не должны вас удивить. На деле нет лучшей системы — и Flexbox и CSS Grid хороши по своему и должны использоваться совместно, а не как альтернатива друг другу.
Для тех из вас, кто перепрыгнул непосредственно к выводам этой статьи (не волнуйтесь, мы тоже так делаем), вот краткий итог сравнения:
Когда использовать флексы, а когда гриды
Сеткой или раскладкой обычно называют взаимное расположение крупных визуальных блоков на странице.
Можно мысленно разделить макет на не пересекающиеся друг с другом прямоугольники. Сначала вы получите самые крупные области, потом эти крупные области можно разделить на области поменьше, и так далее до мельчайших прямоугольников, которые выделяют отдельные слова или элементы страницы. Вся страница будет выглядеть как набор вложенных в друг друга прямоугольников, от самых крупных до самых мелких.
Сетка страницы от крупных до мелких прямоугольников
История
Не все верстальщики учились строить сетки веб-интерфейсов сразу на гридах. Некоторые начали верстать тогда, когда специальных инструментов для построения сеток ещё не было и приходилось использовать таблицы или флоаты, хотя их придумали для изъятия элементов из потока. Но когда в 2006 году появилась технология, предназначенная именно для построения сеток, — CSS Flex Layout (флексы) — таблицы и флоаты с этой целью постепенно перестали применять.
На тот момент выбор верстальщиков в пользу флексов был очевиден. Но с появлением в 2011 году ещё одного инструмента — CSS Grid Layout (гридов) — развернулся спор, который до сих пор продолжается. Верстальщики разделились на две категории: одни — за флексы, вторые — за гриды. И те, и другие пытаются обосновать свою позицию и убедить коллег в том, что правы именно они.
Сходства и различия
Масло в огонь подливает то, что гридами и флексами можно решать одни и те же задачи. Например, сделать стики-футер (когда подвал сайта прилипает к нижней части экрана), случайное количество карточек товара или каркас всей страницы.
Одно из преимуществ гридов — зазоры между линиями (gap), но и они перешли уже в общую спецификацию. Теперь gap можно использовать во флексах, что ещё больше добавляет путаницу в выборе CSS-свойства.
Но тем не менее между флексами и гридами есть значимые различия.
Флексы — одномерные. Это значит, что управлять расположением в рядах нельзя.
Пример сетки на флексах
Гриды же двухмерные. То есть можно передвигать элементы между строками и рядами.
Пример сетки на гридах
Например, если верстальщик хочет расположить логотип, навигацию и номер телефона в шапке, то проще будет использовать флексы. Именно проще: гриды тоже могут решить эту задачу, но флексы справятся с ней гораздо быстрее.
Если взять целый сайт, с шапкой, контентной частью и подвалом, то здесь речь будет идти уже о двухмерности интерфейса. И хотя флексами сайт тоже можно сверстать, гриды сделают это эффективнее и надёжнее.
Таким образом, гриды в основном используются для построения сетки всего интерфейса. Флексы же — для расположения элементов внутри сетки.
Гриды — для каркаса сайта, флексы — для контента.
Мы рекомендуем придерживаться именно такого порядка. А по мере работы с этими двумя свойствами вы и сами начнёте чувствовать, в каких случаях та или иная технология подходит больше.
Чтобы быстрее это понять, можно потренироваться на навыках «Построение сеток на флексах» и «Построение сеток на гридах». Навыки покажут все различия между способами построения сеток, помогут отработать оба и уложить это в голове.
Основные различия между Flexbox и CSS Grid
May 22, 2019 · 4 min read
Главное отличие Flexbox от CSS Grid определяется размерностью. По сути, Flexbox создавался для одноразмерных макетов, а CSS Grid можно было применять к двухмерным макетам. Поэтому CSS Grid может одновременно настраивать и строки, и колонки.
Проще говоря, CSS Grid — это огромный холст, а Flexbox сводится к нескольким опциям, работающим в ограниченном пространстве. CSS Grid создавался для двухмерной организации.
Тем не менее обе разновидности содержат общие черты. Поэтому если вы знаете, как пользоваться гибкими боксами, то быстрее разберетесь в концепциях CSS Grids.
В данной статье мы поговорим о различиях между Grid и Flexbox. Заключаются они в следующем:
Знакомство с Flexbox и Grid
Одномерный Flexbox
CSS F lexible Box Layout (или Flexbox) позволяет дизайнерам правильно позиционировать отзывчивые элементы на экранах различных размеров. Здесь присутствуют следующие инструменты:
Flexbox очень популярен среди фронтенд-разработчиков, поскольку может создавать несколько экземпляров динамического макета и легко выравнивает содержимое в контейнерах.
Модуль гибких боксов задумывался как одномерная модель представления данных, мощный функционал выравнивания и метод разделения пространства между элементами интерфейса. Говоря об одномерности Flexbox, мы указываем на тот факт, что Flexbox может обрабатывать макеты только по одному измерению за раз: либо по столбцам, либо по колонкам. А модель CSS Grid, наоборот, одновременно управляет и столбцами, и колонками.
Двумерный Grid
CSS Grid выравнивает элементы в строках и колонках. Это позволяет разработчикам легче управлять отображением и представлением крупных макетов и целых страниц на экранах десктопов, планшетов и смартфонов.
Элементы размещаются внутри ячеек, которые определяются сеткой (grid). Сильная сторона CSS Grid заключается в возможности создания и определения общего макета. Grid поддерживают: Internet Explorer, Chrome, Safari, Edge и Firefox. Как ни странно, но Opera Mini, Blackberry Browser, QQ Browser и Baidu Browser не поддерживают Grid.
CSS Grid позволяет автоматически создавать макет, либо задавать правила автоматического расположения элементов внутри определенного grid.
Различия между Flex и Grid
Размерность и гибкость
Flexbox позволяет лучше управлять выравниванием и распределением пространства между элементами. Будучи одномерной системой, Flexbox работает либо с колонками, либо со строками. Flexbox подходит для небольших макетов, но не способен выполнить сложные представления данных. Например, свойства текста или документа, разрешающие работать с колонками и плавающими элементами.
Grid обладает возможностями двумерного макета. Поэтому в качестве единицы длины можно использовать гибкую ширину. Это компенсирует ограничения во Flex.
Выравнивание
Flexbox позволяет четко настраивать выравнивание для точного обмена спецификациями. С Flex Direction разработчики могут выравнивать элементы по вертикали или горизонтали. Это используется при создании или изменении направления (реверсии) строк или колонок.
Более детальное выравнивание в обоих плоскостях CSS Grid делает через дробные единицы измерения для «плавучести» grid и автоматическую подстановку ключевых слов для авто-настройки колонок и строк. Встроенная автоматизация избавляет разработчиков от выполнения двойной работы при возникновении путаницы в вычислениях.
Управление элементами
Flex Container — это родительский элемент, а Flex Item — его потомок. Flex Container может обеспечить сбалансированное представление элемента, регулируя его размерность. Благодаря этому разработчики могут создавать макеты, меняющиеся под размеры экрана.
Для точной настройки красивого представления через Grid прибегают к явному и неявному размещению содержимого. Эта встроенная опция автоматизации автоматически расширяет элементы строки и копирует значения предыдущего элемента в новую строку.
Заключение
Flexbox и CSS Grid дают больший контроль над определенными областями фронтенд-разработки. При совместном использовании двух систем их возможности значительно возрастают, что позволяет создавать необычайно гибкий, настраиваемый, красивый, плавный и простой пользовательский опыт.
Объединение кодов CSS Grid и Flexbox облегчает настройку, ведь абстракции этих систем перетекают из одной в другую. Сферы применения обеих спецификаций колоссальны и становятся еще шире при объединении CSS Grid и Flexbox в общую структуру.
Макет CSS Flexbox против макета CSS Grid
Дата публикации: 2021-10-26
От автора: Flexbox и Grid — это две модели макета CSS, которые можно использовать для создания сложных макетов веб-приложений с помощью всего лишь пары правил CSS. Это руководство поможет вам понять различия между моделями макетов CSS Flexbox и Grid и порекомендует, когда использовать одну вместо другой.
Мы начнем с изучения того, как работает модель макета Flexbox, а затем рассмотрим, как работает Grid.
Как работает макет CSS Flexbox
Модель макета Flexbox (или Flexible Box) — это одномерная модель макета CSS, которая позволяет создавать адаптивные макеты для вашего веб-приложения.
Ключевой особенностью модели Flexbox является то, что она автоматически регулирует макет вашей веб-страницы в зависимости от размера вашего контента. Вам нужно только определить направление и поведение обертки в Flexbox с помощью свойств flex-direction и flex-wrap.
Гибкость модели Flexbox позволяет распределять неиспользуемое пространство между элементами, которые выровнены по вертикали или горизонтали.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Давайте посмотрим на пример модели Flexbox в действии. Во-первых, предположим, что у вас есть контейнер div с пятью дочерними элементами, как показано ниже:
Встроенный тег style используется, чтобы помочь вам четко видеть элементы. В настоящее время элементы отображаются следующим образом:
Чтобы включить макет flexbox, вам необходимо добавить свойство CSS display:flex к элементу container следующим образом:
С помощью приведенного выше CSS все дочерние элементы элемента container будут использовать поведение flex для своего отображения. Свойство gap добавляет пробел между строками и столбцами.
В том же элементе container вы можете определить свойство flex-direction для управления направлением содержимого:
Свойство flex-direction:row размещает содержимое по горизонтали, в то время как flex-direction:column размещает содержимое вертикально. Теперь ваш макет HTML должен выглядеть так:
Свойство flex-wrap определяет поведение обертки содержимого, расположенного по горизонтали. Со свойством flex-wrap ваш контент будет перенесен на следующую строку, когда размер экрана станет слишком маленьким, чтобы содержать все дочерние элементы в одной строке:
Давайте настроим содержимое HTML-страницы и добавим более длинный текст для первого элемента:
Взгляните на следующий пример и обратите внимание, как Flexbox создал вторую строку, когда вы уменьшили размер браузера:
Модель Flexbox позволяет расширять элементы, чтобы заполнить доступное пространство строки, используя свойство flex-grow.
Добавив свойство flex-grow в класс item, вы обнаружите, что элементы второй строки расширяются и заполняют доступное пространство строки по мере уменьшения ширины браузера. Обратите внимание, что второй столбец намного меньше, чем остальные столбцы:
Теперь, когда вы узнали, как работает макет Flexbox, давайте продолжим изучение того, как работает макет CSS Grid.
Как работает макет CSS Grid
Макет CSS Grid позволяет создавать двухмерную модель макета, состоящую из строк и столбцов. Он позволяет создать гораздо более жесткий макет для вашей веб-страницы, который не меняется в зависимости от размера содержимого. Чтобы помочь вам понять разницу между макетами CSS Flexbox и CSS Grid, давайте воспользуемся тем же примером, приведенным выше, где у вас есть один элемент контейнера с пятью дочерними элементами.
Как вы уже видели, модель Flexbox позволяет вашему контенту заполнять макет веб-страницы. Если один из ваших элементов имеет больший размер, весь макет будет гибким, чтобы соответствовать разным размерам дочерних элементов.
Но что, если вам нужен строго определенный макет, в котором каждая строка имеет три столбца независимо от размера элемента?
Модель Flexbox не имеет свойств, позволяющих строго контролировать расположение элементов. Чтобы создать строку с тремя столбцами, вам нужно самостоятельно вычислить значение width каждого дочерного элемента. Поскольку промежуток между каждым элементом 20px, давайте рассчитаем ширину для каждого элемента item, как показано ниже:
Использование Grid для макетов страниц, а Flexbox — для макетов компонентов
Мой брат недавно отучился на компьютерщика и сейчас завершает стажировку в области фронтенд-разработки. Он узнал и о CSS Grid, и о CSS Flexbox, но в том, как он пользуется этими механизмами создания макетов, я отметил одну особенность, с которой я уже сталкивался. А именно, ему тяжело даётся принятие решений о том, когда использовать Grid, а когда — Flexbox. Например, он использовал CSS Grid для создания макета заголовка сайта. При этом он отметил, что довести проект до ума ему было нелегко, и что ему пришлось долго экспериментировать с grid-column и настраивать всё до тех пор, пока у него не получилось то, что ему было нужно.
Честно говоря, мне это не понравилось. Поэтому я решил поискать какой-нибудь ресурс, который помог бы моему брату как следует уяснить различия между Grid и Flexbox и дал бы возможность взглянуть на примеры, созданные с использованием обеих этих технологий. Но ничего подходящего мне найти не удалось. Тогда я решил написать статью, посвящённую Grid и Flexbox. Надеюсь, она получилась понятной.
Введение
Прежде чем обсуждать концепции и рассматривать примеры, мне хотелось бы удостовериться в том, что вам понятна разница между CSS Grid и CSS Flexbox. Grid — это модуль для создания табличных, двумерных макетов, позволяющих размещать элементы в строках и столбцах макета. Flexbox позволяет размещать элементы только по строкам или только по столбцам, то есть — в одном измерении.
Если вы совершенно не знакомы с технологиями Grid и Flexbox — взгляните на эту мою статью. Если вы с ними знакомы — это замечательно, это значит, что мы можем перейти к исследованию их различий и к разговору о том, кода и почему каждую из них стоит использовать.
Разница между Grid и Flexbox
Давайте сразу проясним одну вещь: не существует способа однозначно сделать выбор между Grid и Flexbox. Более того, нет правильного и неправильного способа их использования. Данный материал — это своего рода руководство, в котором будут даны рекомендации по использованию того или иного механизма построения макета для конкретных случаев. Я объясню общие концепции и затем перейду к примерам. Вам же нужно будет принимать решения самостоятельно и самостоятельно проводить дальнейшие эксперименты.
Flexbox — одномерный макет. Grid — многомерный макет
Обратили внимание на одну особенность? Flexbox «раскладывает» список элементов в одном измерении, а Grid размещает их в ячейках сетки, состоящей из строк и столбцов. В данном примере во Flexbox-макете элементы «разложены» горизонтально, в строке воображаемой таблицы, но их, если нужно, можно расположить и в столбце такой таблицы, вертикально.
Элементы во Flexbox-макете расположены вертикально
Что лучше выбрать?
Выбор между Grid и Flexbox может оказаться немного сложным (иногда), особенно если вы — новичок в CSS. Я вас понимаю! Поэтому — вот несколько вопросов, которые помогают мне сдвинуться с мёртвой точки в ситуациях, когда приходится выбирать между Grid и Flexbox:
Компонент и два его дочерних элемента, расположенных в одной строке
Но если при работе над компонентом становится понятным, что его дочерние элементы должны располагаться в чём-то вроде таблицы, тогда лучше выбрать Grid.
Макет, для описания которого лучше подойдёт Grid
Теперь, когда я объяснил основные различия Grid и Flexbox, предлагаю перейти к примерам и рассмотреть применение вышеописанных концепций на практике.
Сценарии использования и практические примеры: Grid
▍Боковая панель и основная область страницы
Если в дизайне страницы, над макетом которой вы работаете, можно выделить боковую панель и основную область, это значит, что вам лучше всего обратить внимание на Grid. Взглянем на следующую схему.
Боковая панель и основная область страницы
Вот как я описал бы такой макет средствами HTML и CSS.
▍Набор карточек
Как уже было сказано в начале этого материала, CSS Grid совершенно естественным образом подходит для разработки сеточных макетов. В результате оказывается, что Grid отлично показывает себя при создании макетов, предназначенных для вывода набора карточек в виде таблицы.
Вот как я описал бы такой макет средствами CSS:
Для того чтобы решить эту проблему, можно использовать Grid-макет только в тех случаях, когда ширина области просмотра достаточно велика для его нормального вывода. Сделать это можно так:
▍Макет раздела сайта, имеющего сложную структуру
Для того чтобы спроектировать макет страницы, показанной ниже, Grid можно использовать дважды. Первое применение Grid позволяет разбить страницу на две области (это — боковая панель с текстом Contact us и основная область страницы с формой). Второе применение Grid заключается в разметке области, в которой расположены элементы страницы.
Страница, для формирования которой Grid можно использовать дважды
CSS Grid просто идеально подходит для формирования таких макетов. Вот как выглядит CSS-код подобного решения:
Этот пример я позаимствовал из собственной статьи, посвящённой созданию макетов форм с использованием CSS Grid.
Сценарии использования и практические примеры: Flexbox
▍Навигационная панель
В 90% случаев при разработке навигационных панелей веб-сайтов стоит пользоваться CSS Flexbox. Чаще всего подобные панели устроены так: слева находится логотип, справа — навигационные элементы. Для того чтобы распределить элементы подобным образом Flexbox подходит идеально.
Для того чтобы описать средствами CSS вышеприведённый макет, достаточно сделать следующее:
Та же идея применима и для описания макета, показанного на следующем рисунке.
▍Список действий
Когда вам встречается слово «список», то первое, что приходит в голову, наверняка, выглядит как набор элементов, расположенных вертикально. Но элементы списка могут размещаться не только по вертикали, но и по горизонтали. Прошу это учитывать.
Панели, реализующие списки действий, можно найти на сайтах Facebook или Twitter. Эти списки состоят из кнопок, пользователь может выполнять некие действия, щёлкая по этим кнопкам.
Как видите, элементы этих списков распределены по горизонтали, в одной строке. Для реализации макета подобных списков отлично подходит Flexbox. И это — один из основных сценариев использования Flexbox.
Ещё один вариант использования такого подхода может быть представлен кнопками, находящимися в заголовке или в нижней части модального окна.
И у заголовка, и у «подвала» окна есть дочерние элементы, которые выводятся в одной строке. Ниже показана методика настройки расстояния между ними.
Вот стили заголовочной части окна:
А вот «подвал» стилизуется немного иначе. Кнопка Cancel использует автоматическую настройку внешних отступов для того чтобы сместиться вправо. Вот моя статья, посвящённая ключевому слову auto в CSS.
▍Элементы форм
Комбинация из поля ввода и кнопки, расположенной сразу за ним, даёт нам отличную возможность к применению Flexbox. Взглянем на следующий рисунок.
Поле ввода первой формы занимает свободное пространство, оставшееся в форме после размещения кнопки. То есть перед нами пример формы, ширина которой может настраиваться динамически. То же самое справедливо и в отношении второй формы (она взята из мессенджера Facebook). При изменении её ширины излишки места занимает поле ввода. Присмотримся к этой форме.
Изменение ширины поля при изменении ширины формы
▍Дискуссии и комментарии
Ещё одна ситуация, в которой обычно используют Flexbox, представлена всяческими дискуссиями, состоящими из множества сообщений. Ниже показан пример подобного сообщения.
В элементе, выводящем сообщение, имеется фото пользователя и комментарий. Комментарий занимает, по ширине, всё доступное ему свободное пространство родительского элемента. Это идеальный вариант использования Flexbox.
▍Компоненты-карточки
Компоненты-карточки могут быть очень разными, но обычно они выглядят примерно так, как показано ниже.
Разные варианты компонента-карточки
Ещё один распространённый вариант карточки предусматривает наличие на ней значка, ниже которого расположен текст. Это может быть кнопка, ссылка, или просто элемент оформления страницы. Рассмотрим два варианта таких карточек.
Два варианта карточек
Обратите внимание на то, что иконка и текстовая метка центрированы по горизонтали и по вертикали. Благодаря Flexbox сделать это очень легко.
▍Меню в виде вкладок
Если говорить об элементах, занимающих всю ширину экрана, и при этом содержащих дочерние элементы, которые должны занимать всё доступное им свободное пространство, можно отметить, что Flexbox идеально подходит для создания таких элементов.
Этот подход используется в React Native для создания меню мобильных приложений. Вот пример кода, который формирует меню, напоминающее то, что мы только что рассмотрели. Этот код взят отсюда.
▍Списки возможностей чего-либо
Обратите внимание на то, что во втором элементе следующего списка его дочерние элементы расположены справа налево. Делается это именно так, как показано выше.
Изменение порядка вывода дочерних элементов flex-контейнера.
Иногда это может оказаться очень кстати.
▍Центрирование содержимого раздела
Представим, что у нас имеется раздел страницы, выводимый в её верхней части. Нам нужно центрировать его содержимое по вертикали и по горизонтали. Горизонтальное центрирование — это очень просто, так как оно реализуется с помощью механизмов выравнивания текста.
Раздел страницы, содержимое которого надо центрировать
А как центрировать содержимое по вертикали? Как нам в этом может помочь Flexbox? А вот как:
Комбинирование Grid и Flexbox
Существуют сценарии, в соответствии с которыми Grid и Flexbox применяются самостоятельно. Но в некоторых случаях эти средства для разработки макетов есть смысл использовать совместно. Когда я размышляю о комбинировании Grid и Flexbox, первое, что приходит в голову, это список карточек. Grid используется для размещения карточек на странице, а Flexbox — для создания самих карточек.
Карточки на странице
К этому макету предъявлены следующие требования:
Позвольте мне пояснить этот код (номера пунктов соответствуют номерам, указанным в комментариях):
Запасные варианты и поддержка старых браузеров
▍Использование supports
Пару месяцев назад мне отправили твит, в котором говорилось, что в IE11 мой сайт не может нормально работать. После того, как я это проверил, я заметил, что сайт, и правда, ведёт себя в IE11 очень странно. Всё содержимое сайта съехало в его левую верхнюю область. Работать с сайтом стало совершенно невозможно.
Проблема с сайтом в IE11
▍Использование Flexbox-макета как запасного варианта, применяемого вместо Grid-макета
Если Flexbox не подходит для формирования сеточных Grid-макетов, это ещё не значит, что данная технология не может играть роль запасного варианта, применяемого вместо таких макетов. Flex можно использовать как замену Grid в тех браузерах, которые не поддерживают Grid. Вот созданный мной инструмент, который предназначен для преобразования Grid-макетов во Flex-макеты.
Вот как работает этот код:
Проблемы, возникающие при использовании Grid и Flexbox
Когда я делал код-ревью для проектов брата, я заметил несколько случаев некорректного использования Grid и Flexbox. Полагаю, нелишним будет рассказать здесь о некоторых из таких случаев.
▍Использование Grid для заголовочной части сайта
Эта ошибка была одной из тех «последних капель», которые подвигли меня на написание данной статьи. А именно, я заметил, что брат использует при создании заголовочной части сайта Grid.
Он, когда об этом рассказывал, говорил, что это было сложно, и о том, что не может толком разобраться в CSS Grid. Мысль о том, что с CSS Grid сложно работать, появилась у него после того, как он использовал при разработке макета неподходящую технологию. С Grid работать несложно. А проблема тут лишь в том, что при разработке макета был использован неподходящий для этого механизм.
Рассмотрим следующий пример, иллюстрирующий то, с чем я столкнулся, анализируя неудачный макет.
▍Использование Grid для панелей с вкладками
Ещё один пример неправильного использования Grid представляет собой компонент с вкладками, макет которого создан с применением этой технологии. Взгляните на следующую схему.
Неправильный подход к созданию макета компонента с вкладками
Вот CSS-код такого макета:
▍Чрезмерное использование Flexbox или Grid
Помните о том, что методы формирования макетов, существующие в CSS уже очень давно, могут оказаться идеально подходящими для решения некоторых задач. Неоправданное использование Flexbox или Grid может, со временем, увеличить сложность вашего CSS-кода. Я не имею в виду то, что это — технологии, которыми сложно пользоваться. Я говорю о том, что гораздо лучше пользоваться ими правильно, применяя их в тех ситуациях, в которых они лучше всего себя показывают.
Например, имеется заголовочный раздел сайта, содержимое которого нужно центрировать по горизонтали.
Содержимое, которое центрировано по горизонтали
В каких ситуациях, проектируя макеты веб-страниц, вы используете CSS Grid, а в каких — CSS Flexbox?