что лучше флексы или гриды
Когда использовать флексы, а когда гриды
Сеткой или раскладкой обычно называют взаимное расположение крупных визуальных блоков на странице.
Можно мысленно разделить макет на не пересекающиеся друг с другом прямоугольники. Сначала вы получите самые крупные области, потом эти крупные области можно разделить на области поменьше, и так далее до мельчайших прямоугольников, которые выделяют отдельные слова или элементы страницы. Вся страница будет выглядеть как набор вложенных в друг друга прямоугольников, от самых крупных до самых мелких.
Сетка страницы от крупных до мелких прямоугольников
История
Не все верстальщики учились строить сетки веб-интерфейсов сразу на гридах. Некоторые начали верстать тогда, когда специальных инструментов для построения сеток ещё не было и приходилось использовать таблицы или флоаты, хотя их придумали для изъятия элементов из потока. Но когда в 2006 году появилась технология, предназначенная именно для построения сеток, — CSS Flex Layout (флексы) — таблицы и флоаты с этой целью постепенно перестали применять.
На тот момент выбор верстальщиков в пользу флексов был очевиден. Но с появлением в 2011 году ещё одного инструмента — CSS Grid Layout (гридов) — развернулся спор, который до сих пор продолжается. Верстальщики разделились на две категории: одни — за флексы, вторые — за гриды. И те, и другие пытаются обосновать свою позицию и убедить коллег в том, что правы именно они.
Сходства и различия
Масло в огонь подливает то, что гридами и флексами можно решать одни и те же задачи. Например, сделать стики-футер (когда подвал сайта прилипает к нижней части экрана), случайное количество карточек товара или каркас всей страницы.
Одно из преимуществ гридов — зазоры между линиями (gap), но и они перешли уже в общую спецификацию. Теперь gap можно использовать во флексах, что ещё больше добавляет путаницу в выборе CSS-свойства.
Но тем не менее между флексами и гридами есть значимые различия.
Флексы — одномерные. Это значит, что управлять расположением в рядах нельзя.
Пример сетки на флексах
Гриды же двухмерные. То есть можно передвигать элементы между строками и рядами.
Пример сетки на гридах
Например, если верстальщик хочет расположить логотип, навигацию и номер телефона в шапке, то проще будет использовать флексы. Именно проще: гриды тоже могут решить эту задачу, но флексы справятся с ней гораздо быстрее.
Если взять целый сайт, с шапкой, контентной частью и подвалом, то здесь речь будет идти уже о двухмерности интерфейса. И хотя флексами сайт тоже можно сверстать, гриды сделают это эффективнее и надёжнее.
Таким образом, гриды в основном используются для построения сетки всего интерфейса. Флексы же — для расположения элементов внутри сетки.
Гриды — для каркаса сайта, флексы — для контента.
Мы рекомендуем придерживаться именно такого порядка. А по мере работы с этими двумя свойствами вы и сами начнёте чувствовать, в каких случаях та или иная технология подходит больше.
Чтобы быстрее это понять, можно потренироваться на навыках «Построение сеток на флексах» и «Построение сеток на гридах». Навыки покажут все различия между способами построения сеток, помогут отработать оба и уложить это в голове.
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 хороши по своему и должны использоваться совместно, а не как альтернатива друг другу.
Для тех из вас, кто перепрыгнул непосредственно к выводам этой статьи (не волнуйтесь, мы тоже так делаем), вот краткий итог сравнения:
Особенности Grid Layout и Flexbox: когда и что лучше применять
Создавать адаптивный дизайн, выравнивать элементы на странице можно различными способами. Разные веб-верстальщики работают с разными инструментами и возможностями CSS. Но почему Flexbox у многих в приоритете? Что особенного скрывает в себе CSS Grid? Об этом и не только мы рассказываем в данном материале.
CSS Grid и CSS Flexbox самые известные, широко используемые технологии веб-верстки и горячо обсуждаемые в течение последних лет. Однако, несмотря на некоторые поверхностные сходства, они фактически используются для самых разных задач; каждая из них решает очень разный набор проблем и зачастую те проблемы, которые не способна решить иная технология. Вы и сами можете заметить, что для разных проектов используете разные сетки.
Тем не менее, у многих разработчиков возникает вопрос: когда и что использовать? Точнее даже, когда лучше подойдет именно Flexbox, а когда Grid, можно ли одно заменить другим и так далее. В действительности разобраться во всем этом несложно, но мы решили посмотреть детальнее на эти вопросы и обратить внимание на некоторые особенности обеих технологий.
Grid или Flexbox?
Частый вопрос, но банальный секрет в том, что знать нужно и то и другое, испробовать на практике обе технологии. Впоследствии веб-верстальщик попросту сможет сам осознать, что именно для его компонентов нужнее в данном проекте. Здесь невозможно сказать: «Прислушайтесь к своему «Я» и выберите то, что вам более нравится и более удобно в использовании в техническом плане». И Grid Layout, и Flexbox – это все CSS. И нет никакого значения, что вы пишете display: grid или display: flex, так как все равно вы используете общую их суть. И причина в том, что обе технологии основываются на правилах CSS Intrinsic and Extrinsic Sizing и спецификациях выравнивания Box Alignment.
В ранних материалах мы рассматривали для каких целей и почему верстальщики и разработчики используют разные фреймворки, например, React, Foundation, Vue и прочие. Но это отдельные масштабные инструменты. В случае же с сетками дела обстоят иначе. Они часть CSS, а CSS используется для обработки каждого отдельного элемента веб-дизайна. Соответственно, и это логично, применять можно и то и то, лишь бы выполнялись нужные требования и условия. Например, некоторые дизайнеры используют и не Flex и не Grid, а создают отдельную сетку-контейнер, в которой еще сетки, становящиеся элементами flex. И это практикуется, если особенности верстки и дизайна того требуют. Включили в строгую двумерную grid гибкие части flex. Тоже неплохо.
Flexbox в практике веб-верстки
Попробуйте спросить: «Зачем нужен автомобиль, а не велосипед». Суть в разных возможностях. Что предлагает Flexbox – его описание можно найти в базе MDN – выравнивание и распределение. Таким образом, если на странице есть множество элементов, а в мобильном варианте или при малом размере окна браузера эти элементы должны уже размещаться иначе – то и flex для этих целей как раз более необходим. При этом располагает он элементы так, чтобы контент было удобнее изучать, а значит, большим элементам много пространства, малым – меньше.
Иными словами, flex удобен и необходим при верстке адаптивных дизайнов; для элементов, у которых нет постоянного размера и не требующих строгих параметров разметки; когда от верстальщика (фигурально выражаясь) требуется только разместить все элементы рядом. Например, верстальщику необходима плавающая сетка (размеры изменяющиеся) и четкое разделение на строки. Можно по-разному подойти к решению этого вопроса: grid будет автоматически заполнять ячейки, а flex динамически заполнит эти же самые ячейки. Подходы к решению задачи будут разными, но и вид итоговый тоже.
В первом примере текстовые элементы размещены строго в ячейках (grid). Колонок не может быть больше или меньше, но высота ячеек будет варьироваться от объема текстового элемента. При таком варианте, если при auto-flow есть пустые ячейки, указать длину строки попросту невозможно.
Во втором примере при использовании технологии flex, элементы заполняют собой всё имеющееся пространство, а потому четкого размещения и выравнивания нет.
Но второй пример можно изменить и адаптировать, если для свойства flex-basis установить значение auto. Тогда текст в ячейках не будет переноситься на строки, а ширина ячеек будет «подгоняться» под полную длину текстового блока. Но при этом вся конструкция продолжит оставаться в пределах заданной ширины.
Одно дело примеры, другое – практическое применение. Вспомним, как часто всем нам приходится видеть список тегов, или как его раньше называли «облако тегов». Располагающиеся под статьями или в колонке справа-слева, короткие словосочетания или слова, кажется, что находятся «вперемешку» и не имеют никакой системности в расположении. В данном случае удобнее использовать Flexbox, так как задача состоит в том, чтобы заполнить всё выделенное пространство и разместить текст строго на строчках. Кажется, что это не тот вариант, когда требуются сетки (хоть какие-нибудь). Сетки нужны для того, чтобы выравнивать и размещать строго в колонках и строках. А в случае с тегами о какой-либо системности и речи быть не может.
Но вот наглядный пример, в котором технология flex отлично справляется с задачей. При разной длине каждого элемента, вся их совокупность выглядит очень ровненько и красиво, систематизировано.
Еще вариант необходимости flex – отцентрирование текста внутри элемента. Впрочем, вместо текста может быть и изображение, иконка или иной блок с данными. Но суть-то как раз в центрировании по вертикали и горизонтали.
В будущем (при наличии поддержки браузером тех свойств Box Alignment properties, что не используются во flex) мы сможем проделывать все примеры без необходимости включения сетки и свойства display: flex в контейнер. Но на сегодняшний момент включение в свой код данной строки CSS – обычная необходимость. И во всех примерах выше она присутствовала.
Для чего еще хорош Flexbox
Формы. Точнее для того, чтобы форма не развалилась при изменении ширины странницы. Наборы иконок, полей, небольших блоков, кнопок можно очень удачно скомпоновать, разместить, выровнять и при этом нисколько не задумываться о сложных вычислениях координат, положений относительно осей и так далее. Да, к тому же и размер полей будет адаптироваться под ширину формы.
Другой особенностью flex-сеток является динамическое расширение одной из ячеек при том, что остальные будут оставаться такими, какими были созданы изначально. Пример ниже в двух вариантах: по умолчанию и при увеличенном контенте в среднем блоке.
Таким образом, подводя итог того, когда и при каких вариантах лучше всего использовать Flexbox, нужно заметить, что он идеален при небольших сценариях, когда требуется все выровнять не просто по осям, а именно, заполняя свободное пространство. Но и так это делать, чтобы контент было удобно изучать. В то же время необходимо обратить внимание на тот факт, что если спустя время в веб-дизайн приходится что-то добавлять, то как раз технология flex подойдет для внедрения этих самых элементов лучше чем grid.
Grid – двумерная сетка – создает новую строку (переход на нее), если в одной много элементов (ячеек). А в большинстве случаев это неудобно и нежелательно. Flex же способен ужать всю строку и добавить новый элемент рядом на линии путем использования свойства flex-basis со значением auto или ноль (0).
И вот еще несколько примеров того, как используется flexbox и Grid Layuot на разных сайтах. Это и theguardian, новости, меню в виде шестиугольников, журнал.
Grid тоже бывает нужен
Несмотря на большую полезность flex-сеток, существуют варианты верстки и дизайна, когда от flex, при всем его кажущемся удобстве, нужно отказаться. Один из вариантов уже есть выше, когда все элементы были строго расположены в ячейках таблицы.
Суть в том, что Flex работает с одной большой линией, которая распределяется по строкам и представляет собой отдельный контейнер. А Grid, в свою очередь, создает макет из строк и столбцов, где каждая ячейка закрепляется за элементом. Отсюда несложно сделать логический вывод, что Grid CSS удобен тогда, когда элементы должны находиться в строгом выровненном порядке на странице, не менять своего положения. И размер самих элементов здесь роли не играет.
Иногда веб-мастера полагают, что Flexbox нужен только для элементов, а с помощью Grid делают общую разметку страницы. Ох, нет, не стоит так думать… На странице вполне могут находиться два-три элемента, которые требуют четкого размещения в структуре этой самой страницы, а потому как раз таки технология flex будет излишней.
Еще вариант преимущества Grid над Flexbox. Например, существует несколько динамических контейнеров с разными элементами, но вы хотите, чтобы они располагались рядом друг с другом или строго друг под другом и так далее. Их уместнее заключить в «строгую» Grid-сетку. Или можно с помощью Grid ограничить динамичность Flexbox и не позволить ему расширяться до бесконечности. Тут, разумеется, многое зависит от макета, но иногда это весьма удобно.
Также бывают варианты, когда с помощью flex’а создают статическую сетку, используя flex-grow = 0 и задавая процентный размер элементов. Но ведь аналогично мы поступаем и при работе с grid, поэтому не лишним будет задуматься, а зачем в данном варианте нужен flexbox? Не проще сразу использовать строгий и статичный Grid? На примере ниже создана таблица с технологией flex. Но стоит расширить один из элементов, как вся строгость рушится. Вопрос: «Строгость была нужна»? Если «да», то flex просто неуместен.
Завершение
Даже несмотря на то, что очень легко объяснить и понять, чем Grid Layout отличается от CSS Flexbox, все равно сказать точно, что именно использовать в данный конкретный момент бывает трудно. Тут подходит только вариант пробы обеих технологий. При этом всегда можно использовать и Grid и Flex одновременно или переключать шаблон с одной сетки на другую.
Мы постарались наглядно продемонстрировать и рассказать о том, как логически происходит выравнивание и определение размеров динамических элементов, как влияет на них статика. CSS Grid и Flexbox были созданы для решения разных задач и при этом Grid поддерживается браузерами гораздо хуже, чем Flexbox. В обозримом будущем положение дел для CSS Grid улучшится, и можно будет гораздо чаще использовать сочетание двух технологий. Сейчас такое сочетание возможно при условии, что сайт создается исключительно для современных версий браузеров.
Выбор CSS макета — Grid или Flexbox?
Удачно оформленный макет удерживает пользователей на сайте, так как делает важные элементы доступными и легко находимыми. Слабые же макеты отпугивают посетителей, которые покидают ресурс, так и не найдя того, за чем пришли.
В веб-дизайне макет – это то, как сайт отображается на экране. В HTML 5 есть довольно много элементов, определяющих внешний вид веб-страницы: заголовок, навигационный блок, абзац, сноска, статья и нижний колонтитул, каждый из которых имеет свое особое значение в создании макета. Вместе же они формируют четыре основных раздела страницы – заголовок/баннер, поисковый блок, содержимое и нижний колонтитул.
Языки программирования помогают сделать сайты «живыми», но в основе каждой страницы по-прежнему лежит старый добрый HTML. При рассмотрении макетов необходимо учитывать факторы, определяющие их качество, а именно отзывчивость, порты просмотра, устройства отображения, браузеры и размеры экранов пользователей. Грамотный макет не только здорово смотрится, но также может сохранять задуманную структуру, вписываясь в экраны с любым возможным соотношением сторон. Как раз за эту подстройку и отвечает CSS. В текущей статье мы в общих чертах рассмотрим два его мощнейших инструмента: Flexbox и Grid.
Что такое макет CSS FLEXBOX?
Flexbox – это общепринятое сокращение для Flexible Box Module (модуль гибкого контейнера), который представляет собой одномерную модель макета. Это значит, что одновременно он может работать только со строкой или столбцом, но не с обоими сразу. Flexbox эффективно справляется с выравниванием, распределением и направлением элементов страницы.
Двумя основными понятиями этой модели макета являются главная ось и поперечная ось. Главная ось flex-контейнера – это основное направление, вдоль которого выстраиваются flex-элементы, поперечная же ось ей перпендикулярна.
Для начала давайте обернем HTML-элементы div во flex-wrapper.
В CSS родительский контейнер “flex-wrapper” преобразуется во flexbox с помощью простой инструкции.
При добавлении элементов и свойств я буду использовать яркие цвета и отступы, чтобы выделить контейнеры и div-элементы.
Вы можете видеть, как удачно элементы div располагаются по горизонтали, но при этом они занимают не всю область контейнера, и в конце остается пустое пространство. Это можно исправить, добавив flex-grow.
Свойство flex-grow отвечает за распределение каждого элемента flex-контейнера. По умолчанию значение этого свойства равно 0, присваивая же разное количество единиц div-элементам, вы увеличиваете их по отношению к остальным. Противоположный эффект дает свойство flex-shrink.
FLEX-DIRECTION
Flex-direction определяет направление размещения элементов контейнера. С его помощью можно заставить их располагаться по направлению вверх, вниз, влево или вправо, а также в обратном порядке. По умолчанию элементы flex-контейнера упорядочены вдоль главной оси слева направо.
Здесь элементы также отображаются слева направо, но в обратном порядке. В итоге четвертый div становится первым, а первый, в свою очередь, последним.
Здесь же упорядочивание происходит уже вертикально – сверху вниз.
Теперь элементы также расположены вертикально, но в обратном порядке, т.е. четвертый оказался вверху, а первый внизу.
FLEX BASIS
Flex basis определяет размер элемента внутри контейнера. При этом значение размера может указываться в em, px или процентах. Это свойство отличается от flex-grow тем, что не распределяет пространство между элементами контейнера равномерно.
Flex – это сокращенное свойство, объединяющее flex-shrink, flex-grow и flex-basis. Его рекомендуется использовать вместо раздельного написания свойств, указывая в нем их значения в следующем порядке: flex-grow, flex-shrink, flex-basis.
JUSTIFY-CONTENT И ALIGN-SELF
Justify-content и align-self – это идеальное решение для размещения div или контейнера в центре окна браузера.
CSS GRID Layout
CSS grid (сетка) представляет собой мощный двухмерный макет, при использовании которого можно одновременно работать со строками и столбцами. В основе CSS Grid лежит неявное разделение экрана на сетку из 12 частей, в которые в итоге и вписываются элементы.
Преимущество этой технологии перед Flexbox и другими видами макетов в ее возможности работать двухмерно. При этом она также упрощает позиционирование, и элементы контейнера могут размещаться, перекрывая друг на друга.
ОПРЕДЕЛЕНИЕ СЕТКИ В CSS GRID
Преобразование HTML-структуры в СSS сетку выполняется одной простой CSS инструкцией.
GRID TEMPLATE-COLUMNS И GRID-TEMPLATE-ROWS
Свойства grid-template-columns и grid-template-row устанавливают величину столбца или строки, определяя размер div-элементов согласно присвоенным значениям, которые указываются в px, fr, процентах или em.
grid-template-columns: 40px 1fr 20%; — эта строка дает браузеру команду присвоить первому div ширину 40px, второй же занимает одну долю отведенного места, а третий 20%. Элементы с 4 по 6 автоматически смещаются под первые 3 и принимают те же значения в том же порядке, т.е. div 4 получает размер 40px, div 5 — одну долю, а div 6 – 20%.
Чтобы поместить все шесть div-элементов в одну строку нужно указать в свойстве grid-template-column шесть значений. При этом не обязательно использовать для столбцов разные единицы измерения, можно задать только проценты, fr или px.
grid-template-rows: 200px; — эта строка присваивает всем div-элементам высоту в 200px.
Присвоив 16,7% для 6 точек, я успешно разделил шесть элементов контейнера по шести равным частям экрана. Значение 16,7% я выбрал, потому что при умножении 16,7 на 6 как раз получится 100% ширины экрана.
Использование процентов и пикселей работает идеально, но им недостает гибкости, и они уступают наиболее эффективному компоненту – долям CSS сетки.
Fr – это дробная единица, которая присваивает каждому элементу одну долю доступного пространства, которое можно увеличивать, выделяя под div необходимую ему область.
Теперь наше свойство grid-template-columns стало:
В результате каждый div-элемент был размещен на экране равномерно.
Изменив второе и четвертое значения, мы сделали соответствующие элементы вдвое больше остальных. Самое же главное, что они по-прежнему распределяются в браузере равномерно и имеют высокую отзывчивость.
ФУНКЦИЯ REPEAT
Вместо того, чтобы повторно переписывать значения, можно задействовать функцию repeat, которая позволит сделать это всего один раз.
Синтаксис этой функции относительно прост. Сначала пишем слово “repeat”, после которого определяем, сколько раз нужно повторить размер, в данном случае 6, а затем указываем величину единицы измерения. Эта функция аналогичным образом работает со свойством template-row и позволяет использовать как fr, em, px, так и проценты.
Gap – это отступ, представляющий свойство CSS сетки, которое позволяет указывать расстояние между div-элементами контейнера. Работает оно точно также, как свойство margin и измеряется обычно в px.
GRID-COLUMN-START/GRID-COLUMN-END И GRID-ROW-START/GRID-ROW-END
Свойства grid-column-start и grid-column-end помещают элемент сетки в конкретное место столбца относительно определенных строк сетки. Свойства же grid-row-start и grid-row-end делают то же самое, но в отношении строки. Присваивая этим свойствам значения, можно удобно управлять начальной и конечной точкой элемента сетки, выделяя ему нужную область.
Если вы присвоите указанные значения первому div, то заметите, что он смещает второй div на одну единицу и занимает первые две позиции, смещая третий div вниз. В отношении же строк теперь он занимает три позиции и становится выше.
В программировании индексация производится по особому правилу, согласно которому мы обычно начинаем отсчет с 0. В этом случае последнее значение, как правило, упоминается, но не учитывается. Например, значение свойства grid-column-end равно 3, но по факту оканчивается оно на 2-х также, как и grid-row-end оканчивается на 3-х, а не на 4-х.
GRID-COLUMNS И GRID-ROW
Это сокращенный вариант для свойств grid-column-start/grid-column-end и grid-row-start/grid-row-end. В качестве значений в этом случае через слэш указываются начальные и конечные позиции элемента:
СОЗДАНИЕ ГАЛЕРЕЙ
CSS сетка идеально подходит для создания галерей. С помощью небольшого количества кода и манипуляций вы можете создать их прекрасные отзывчивые макеты.
Мозаичный макет галереи
Такой макет создает равные плитки изображений, равномерно распределенные по странице/контейнеру.
Этот код создаст прекрасный макет плиточной галереи изображений.
Макет Masonry-галереи
Этот макет уже неравномерен, так как не имеет фиксированной высоты строк. Однако при помощи grid-columns и grid-rows мы можем подстраивать изображения, чтобы они вписывались в назначенные дробные единицы и перемещались по ним нужным нам образом.
GRID TEMPLATE AREAS
Свойство Grid-template-areas присваивает элементам имена, чтобы свойство grid-area могло на них ссылаться. Работает оно аналогично grid-column и grid-row, позволяя легко отображать и размещать конкретные области в структуре сетки.
GRID AREAS
Ссылаться на именованные области необходимо в порядке их вызова. Например, область сетки для #one не может быть нижним колонтитулом, поскольку эта область сетки именуется последней. Нарушение же правильного порядка приведет к ошибке в дизайне.
Что же лучше — Flexbox или Grid?
В своей сути Grid является макетом на основе контейнеров, а Flexbox на основе содержимого. И тот, и другой по-своему эффективен, хотя CSS Grid включает больше возможностей и позволяет легче манипулировать строками и столбцами сетки. Прежде чем решать, какой использовать, следует проанализировать сложность, структуру и содержимое создаваемого вами сайта. Приведу еще одно несколько углубленное сравнение: в макете flexbox размер ячейки (flex-элемента) определяется в самом flex-элементе, а в макете Grid размер элемента определяется уже в его контейнере.
Лично я могу посоветовать использовать CSS Grid для общего макета сайта, а затем уже Flexbox для элементов контейнера. Однако CSS Grid также отлично работает с отдельными элементами и учитывает нюансы реальной структуры сетки лучше, чем Flexbox. Например, инструкция grid-template-areas отобразит структуру сайта буквально за несколько секунд, после чего вы сможете сосредоточится на выравнивании контента по своему усмотрению.