Abr@X@bra.ru
CSS Grid идеально подходит для адаптивной верстки
CSS Grid идеально подходит для адаптивной верстки

CSS Grid идеально подходит для адаптивной верстки

19.09.2017
167
Я думаю, что вы уже в курсе, что Grid превосходит Flexbox для создание макетов. Но как насчет адаптивных макетов? Что лучше использовать Flexbox или Grid? Оба умеют работать с адаптивными макетами. Вы можете подумать, что Flexbox лучше подходит, в конце концов - элементы Flex могут растягиваться, сжиматься, изменять направление и т.д. Но в Grid на самом деле есть несколько новых трюков, которые сэкономит вам много времени и проблем для адаптивных макетов.

Функция Minmax

Первый блестящий новый инструмент Grid, функция minmax, который позволяет нам определять диапазоны для столбцов и строк в нашем макете. В этом примере у нас есть оранжевая боковая панель, и мы хотим чтобы ширина была не меньше 100 пикселей, но не более 30% от ширины контейнера. Ширина контейнер 500 пикселей, поэтому наша боковая панель с удовольствием занимает 30% (150 пикселей).



Вот такой же точно код, но ширина контейнера меньше 150px. Теперь наше минимальное значение срабатывает и гарантирует, что оранжевая боковая панель не будет меньше 100 пикселей.



Работа функции minmax просто удивляет, в большинстве случаев вам даже не нужно будет использовать медиа-запросы.  

Мы можем добиться аналогичного эффекта с помощью Flexbox, но для этого требуется немного больше работы и кода. Мы должны использовать комбинацию flex-grow, min-width, max-width:



Метод с Grid более гибкий и проще адаптируется. Кода меньше почти в два раза.

Одно правило для всех элементов

Если вам все-таки нужны медиа-запросы, с макетом Grid, это легко сделать. Предположим, мы хотим изменить этот макет на мобильном устройстве в один столбец. С помощью Flexbox нам нужно будет изменить каждый элемент в макете, чтобы переопределить минимальную ширину. Максимальную ширину отменять не нужно, так как минимальная ширина имеет приоритет.



Если у вас простой макет этот подход вполне себе рабочий. Но чем сложнее будет ваш макет, тем больше элементов нужно будет переопределять через медио-запросы. С помощью Grid, эту задачу решить намного проще.



Вы можете даже изменить всю сетку с помощью одного правила, если хотите, изменив размер и количество столбцов, строк и т. д. CSS Grid - отличный выбор для гибких макетов.

Делайте то, что вы любите и любите то, что вы делаете!

Подпишись на автора, чтобы не пропустить следующий пост.




CSS, CSS Grid
Читайте также:
CSS Grid, подробное руководство по гридам с примерами

CSS Grid, подробное руководство по гридам с примерами

Это руководство было создано как ресурс, который поможет вам лучше понять и изучить Grid CSS, и было организовано таким ...
Читать
Flexbox и как делать адаптивные сайты

Flexbox и как делать адаптивные сайты

Современный front-end разработчик активно должен уметь применять на практике различные инструменты, позволяющи...
Читать
React.js на русском языке. Часть первая

React.js на русском языке. Часть первая

Опубликовал свой первый пост, на habrahabr.ru по React.js
Мне очень нравиться концепция и подход React.js, что...
Читать