От автора: как и многие мои коллеги, я с большим ожиданием наблюдал удивительно быстрое принятие CSS Grid Layout, чтобы продемонстрировать, задокументировать и самому проповедовать этот набор новых инструментов дизайна, которые перевернули все с ног на голову.
К сожалению, мой мозг, как правило, стремится избавиться от технических знаний, которым я еще не смог найти практического применения. Как бы я не хотел запомнить все правила grid-* после просмотра видео или изучения демо, сделать это очень сложно. То же самое и со стилями под Firefox Developer Edition и флагом в Chrome.
Однако с выходом Firefox 52 и Chrome 57 ситуация изменилась. И почти сразу же возникла проблема в одном из наших проектов, который представлял собой простой, автономный пример того, как сетчатый макет может все упростить. Хотя мой пример не такой впечатляющий или вдохновляющий, как эксперименты по макетированию Jen Simmons, для меня это маленькая победа. И как часто бывает, такие маленькие победы зачастую открывают путь к чему-то большему.
Задача
Мне выдали контент страницы со следующим приоритетом:
вступительный текст;
работающие ссылки в двух разделах;
текст с подробным разъяснением.
По мере увеличения пространства я хочу, чтобы разделы со ссылками отображались рядом и были одной высоты. На более широких вьюпортах я хотел бы, чтобы разделы переносились в сайдбар, а контент заполнял оставшееся пространство.
Структура разметки:
|
1 2 3 4 5 6 7 8 |
<div class="container"> <div class="prose"></div> <div class="sidebar"> <div class="box"></div> <div class="box"></div> </div> <div class="prose"></div> </div> |
Старый способ
В этом дизайне нам нужно, чтобы все элементы отступали друг от друга на 1.5em со всех сторон. Сначала я применил технику полупаддингов контейнера и его дочерних элементов от Samantha Zhang:
|
1 2 3 4 5 |
.container, .prose, .sidebar { padding: 0.75em; } |
Но она не учитывает блоки сайдбара, которым тоже нужны отступы. И padding использовать я не могу, это исказит внешний вид. Можно было бы добавить контейнеры, но я выбрал margin и display: flex;, чтобы предотвратить схлопывание отступов (нам в любом случаем понадобится Flexbox на этих элементах). Также нужно убрать некоторые margin’ы сайдбара, чтобы учесть двойной отступ:
|
1 2 3 4 5 6 7 8 9 10 |
.sidebar { display: flex; flex-direction: column; margin: -0.75em; position: relative; } .box { margin: 0.75em; } |
Пора добавить адаптивности! На средних вьюпортах можно вернуться к правилу display: flex, с помощью которого мы распределили контент сайдбара равномерно по строке:
|
1 2 3 4 5 6 7 8 9 |
@media (min-width: 34em) and (max-width: 49.9375em) { .sidebar { flex-direction: row; } .box { flex: 50%; } } |
На широких вьюпортах я хочу, чтобы сайдбар съезжал вправо, а контент был слева. Я решил добавить обтекание обоим элементам, а это значит, что мне понадобится clearfix на контейнере:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.container::after { clear: both; content: " "; display: table; } @media (min-width: 50em) { .prose { float: left; width: 66.666%; } .sidebar { float: right; width: 33.333%; } } |
Результат с подчеркнутыми элементами макета:
Так в чем проблема?
Несмотря на то, что CSS в этом демо не самый гениальный, некоторые самые непонятные приемы легко принять как должное:
чтобы получить равные отступы вокруг адаптивных шаблонов, необходимо половину отступа применить к контейнеру и половину к его дочерним элементам;
flexbox дает нам возможность сообщить о своих намерениях в дизайне с помощью таких терминов, как строка и столбец. Однако использовать можно либо то, либо другое, и это заставляет нас вернуться к менее интуитивно понятному свойству float в случаях, когда необходимо изменить обе оси в одно и то же время;
так как мы добавили обтекание ко всем дочерним элементам, мы вынуждены были использовать псевдоэлементы для искусственной очистки контейнера, чтобы избежать нарушения в компоновке элементов страницы.
Вы могли бы сказать: «а почему ты не воспользовался другой техникой?». Однако техник без компромиссов очень мало. Если сайдбар позиционировать абсолютно, то его контент не сможет превышать основной контент. Если переместить сайдбар в конец разметки и изменять его с помощью свойства order на маленьких размерах, то вам придется настраивать индексы вкладок для вспомогательных устройсв.
CSS Grid Layout в этом плане отличается. Он был построен с нуля под две оси одновременно. Давайте посмотрим, как Grid Layout применяется к этому макету.
Способ с Grid
Я говорю браузеру, что контейнер будет использовать сетку, а отступы между элементами должны быть 1.5em… без разделителей:
|
1 2 3 4 5 |
.container { display: grid; grid-gap: 1.5em; padding: 1.5em; } |
В сайдбаре будут те же стили макета и отступы. На самом деле, можно было бы использовать display: subgrid, но пока что это слишком сложно:
|
1 2 3 4 |
.sidebar { display: inherit; grid-gap: inherit; } |
Больше для подхода mobile-first нам ничего не нужно. На средних вьюпортах сайдбар перестраивает свои дочерние элементы в две равные колонки, каждая из которых занимает половину пространства:
|
1 2 3 4 5 |
@media (min-width: 34em) and (max-width: 49.9375em) { .sidebar { grid-template-columns: 1fr 1fr; } } |
(Появились новые единицы измерения fr, и я обожаю их. Сокращение расшифровывается как «fractional» и значит «одна часть доступного пространства». Можно было бы использовать 50% 50%, но тогда нужно было бы вычислять grid-gap.)
На больших размерах мы применяем эту же технику к контейнеру, только первую колонку мы делаем 2fr, чтобы она занимала две трети свободного пространства:
|
1 2 3 4 5 |
@media (min-width: 50em) { .container { grid-template-columns: 2fr 1fr; } } |
По умолчанию сайдбар выстраивается в один ряд, а дочерние элементы растягиваются, заполняя свободное пространство. Последний шаг – необходимо охватить сайдбар через два ряда контента и определить размеры дочерних элементов сайдбара на основе минимального размера, необходимого для отображения их контента.
|
1 2 3 4 5 6 |
@media (min-width: 50em) { .sidebar { grid-auto-rows: min-content; grid-row: span 2; } } |
Вот и все! Свежая версия с grid нашего раннего демо в том варианте, как она появится в последних версиях Firefox и Chrome:
Почти на половину меньше CSS, нет отрицательных margin’ов, и почти нет вычислений! Ура!
Забываем, что учили
Время исповеди: мне с трудом далось демо выше. Мне пришлось часто просить помощи у моего коллеги Erik Jung из Cloud Four, чтобы все заработало так, как задумывалось. Оглядываясь назад, мне кажется, что моим самым главным врагом был мой собственный 15-летний опыт написания стилей. Я настолько привык к тому, что должен абстрагироваться от задачи дизайна, привык к тому, что я должен говорить на языке CSS и работать над его причудами, что сделал задачу сложнее, чем это требовалось. Я тратили время, пытаясь хакнуть какие-то проблемы, когда все, что нужно было сделать, это сказать «эй, растяни div на два ряда».
Из этого упражнения я вынес для себя, что CSS Grid Layout это удивительный инструмент, и я едва понял границы его возможностей. Также приятно, что браузеры с поддержкой Grid поддерживают функциональные запросы, и, возможно, мы сможем ими пользоваться намного раньше, чем думали. В следующий раз, когда я буду бороться с макетом, постараюсь подойти к проблеме как ученик, сопротивляясь ментальным «мозолям», который сформировались за годы обходных решений.
Автор: Tyler Sticka
Источник: //cloudfour.com/
Редакция: Команда webformyself.
