От автора: в мире веб-разработки всегда наблюдался разрыв при переходоме от дизайна к разработке. Амбициозные дизайнеры хотят, чтобы конечный результат их усилий выглядел уникальным и красивым (и соответствовал их первоначальному видению), тогда как многие разработчики находят большую ценность в результате, который является последовательным, надежным и стабильным (и легко кодируемым). Эта динамика может привести к напряженности между двумя сторонами, при этом эти стороны стремятся направить свои действия по-своему.
Хотя эта ситуация в некоторой степени неизбежна, новые передовые технологии могут сыграть свою роль в сближении двух сторон. Одной из таких технологий является CSS Grid. В этом посте рассматривается, как ее можно использовать для написания стилей CSS, которые соответствуют макетам дизайна с высокой степенью точности (без головной боли!).
Распространенные способы, которыми дизайнеры дают инструкции для разработчиков интерфейсов — это макеты дизайна (под макетами мы понимаем результаты, созданные в Sketch, XD, Illustrator, Photoshop и т. д.). Все дизайнеры в некоторой степени работают по-разному (как и разработчики), но многие любят основывать структуру своих макетов на какой-то сетке. Согласованная сеточная система имеет неоценимое значение для понимания того, как должна кодироваться веб-страница и как она должна адаптироваться, если размер экрана пользователя отличается от макета. Как разработчик, я очень ценю дизайнеров, которые стараются принять хорошо продуманную сеточную систему.
Макет с 12 столбцами особенно популярен, но распространены и другие шаблоны. Такое программное обеспечение, как Sketch и XD, позволяет легко создавать страницы, которые следуют заданному макету столбцов — вы можете включать и выключать наложения одним нажатием кнопки.
Макет сетки, разработанный в Sketch (слева) и Adobe XD (справа)
После того, как сеточная система внедрена, большинство элементов дизайна должны располагаться прямо внутри нее. Такой подход обеспечивает равномерное выравнивание фигур и делает его более привлекательным. В дополнение к визуальной привлекательности, предсказуемая сетка дает разработчикам четкую цель для поиска при написании стилей.
К сожалению, этот базовый шаблон может быть обманчиво сложным для точного кодирования. Фреймворки, такие как Bootstrap, часто используются для создания макетов сетки, но они имеют свои недостатки, такие как добавленный вес страницы и отсутствие детального контроля. CSS Grid предлагает лучшее решение для перфекционистов. Давайте рассмотрим пример.
Сетка с 14 столбцами
Дизайн выше — хорошее приложение для сетки. Существует 14-столбцовый шаблон с несколькими элементами, расположенными в нем. Хотя все блоки имеют разную ширину и смещения, все они придерживаются одной и той же сетке. Этот макет может быть создан с помощью flexbox — и даже float — но это, вероятно, потребовало бы некоторой очень специфической математики для получения идеального попиксельного результата во всех контрольных точках. И давайте посмотрим правде в глаза: у многих разработчиков фронт-энд недостаточно терпения для этого. Давайте рассмотрим три стратегии компоновки CSS сетки для более простого выполнения этой работы.
Стратегия 1: Базовая сетка
Наиболее интуитивно понятный способ написания равномерно расположенного 12-колоночного макета, вероятно, заключался бы примерно в следующем. Здесь внешний контейнер используется для управления расстоянием между внешними зазорами с левым и правым отступом, а внутренний элемент ряда используется для ограничения содержимого до максимальной ширины. Ряд получает определенную сетку:
display: grid; grid-template-columns: repeat(12, 1fr); grid-gap: 20px;
Это правило определяет сетку, состоящую из 12 столбцов, каждый из которых имеет ширину в одну часть (fr). Между столбцами также указан зазор в 20 пикселей. Начало и конец любого дочернего столбца могут быть легко установлены с помощью свойства grid-column. Например, установив grid-column: 3/8, мы размещаем этот элемент с пятой до восьмой колонки.
Мы уже можем видеть пользу в том, что предоставляет CSS-сетка, но у этого подхода есть некоторые ограничения. Одной из проблем является Internet Explorer, который не поддерживает свойство grid-gap. Другая проблема состоит в том, что этот подход с 12 колонками не дает возможности начинать столбцы в конце зазоров или заканчивать столбцы в начале зазоров. Для этого нужна другая система.
Стратегия 2: Более гибкая сетка
Хотя grid-gap может и не работать в IE, зазоры можно воссоздано путем включения пробелов в состав самого шаблона сетки. Функция repeat доступна для grid-template-columns и принимает в качестве аргумента не только ширину колонки, но повторяющиеся шаблоны произвольной длины. С этой целью шаблон column-then-gap может повторяться 11 раз, а затем мы можем вставить последний столбец для завершения желаемой схемы внутреннего зазора с 12 столбцами / 11 зазорами.
grid-template-columns: repeat(11, 1fr 20px) 1fr;
Это позволяет обойти проблему IE, а также позволяет рядам начинать и заканчивать и на колонках, и на зазорах. Это хорошее улучшение по сравнению с предыдущим методом, но его все равно можно усовершенствовать. Например, что если колонка должна располагаться так, чтобы одна сторона охватывала внешний край экрана, а другая соответствовала сетке? Вот пример:
Макет сетки с элементом, находящимся на одном уровне с внешним краем
В этом макете карточка (наша левая колонка) начинается и заканчивается в сетке. Основное изображение (правая колонка) также начинается в сетке, но простирается за сетку до края экрана. Создание CSS для этого сценария может стать проблемой. Один из подходов может заключаться в том, чтобы расположить изображение абсолютно и прикрепить его к правому краю, но это связано с недостатком выведения его из потока документов (что может быть проблемой, если изображение выше карточки). Другой способ — использовать float или flexbox для поддержания потока документа, но это повлекло бы некоторые хитрые одноразовые вычисления, чтобы получить правильную ширину и интервал. Давайте рассмотрим лучший способ.
Стратегия 3: Еще более гибкая сетка
Этот метод основан на идее, представленной в последней редакции спецификации. Вместо того, чтобы сетка существовала в других элементах, определяющих размеры зазоров и ширину рядов, мы интегрируем эти пространства с шаблон сетки. Поскольку все отступы, колонки и зазоры включены в шаблон, дочерние элементы можно легко и точно расположить в сетке с помощью свойства grid-column.
$row-width: 1140px;
$gutter: 30px;
$gap: 20px;
$break: $row-width + 2 * $gutter;
$col-width-post-break: ($row-width - 11 * $gap) / 12; .container { display: grid; grid-template-columns: $gutter repeat(11, calc((100% - 2 * #{$gutter} - 11 * #{$gap})/12) #{$gap}) calc((100% - 2 * #{$gutter} - 11 * #{$gap})/12) $gutter; @media screen and (min-width: #{$break}) { grid-template-columns: calc(0.5 * (100% - #{$row-width})) repeat(11, #{$col-width- post-break} #{$gap}) #{$col-width-post-break} calc(0.5 * (100% - #{$row-width})); }
}Да, чтобы сделать это правильно, нужна математика. Важно, чтобы шаблон был установлен по-разному до и после реализации максимальной ширины строки. Я решил использовать для этого SCSS, потому что определение переменных может сделать вычисления намного более управляемыми (не говоря уже о том, что они более читабельны для других разработчиков). То, что начиналось как шаблон из 12 частей, разрослось до шаблона из 23 частей с интеграцией 11 внутренних зазоров, и теперь составляет 25 частей с учетом левого и правого зазоров.
Одна из замечательных особенностей этого подхода заключается в том, что его можно использовать в качестве основы для любого макета, который привязывается к сетке после установки шаблона, включая традиционно неудобные макеты, которые включают колонки, охватывающие внешние края. Более того, он служит простым способом точной реализации проектов, которые, вероятно, будут переданы в виде качественных макетов. Это то, что должно порадовать как разработчиков, так и дизайнеров!
Есть несколько предостережений …
Хотя эти методы могут использоваться, чтобы решить традиционные проблемы моделирования, они не является панацеей. Вместо этого их следует рассматривать как альтернативные инструменты для правильного применения.
Одной из ситуаций, в которой второй и третий шаблоны макетов не подходят, являются макеты, которые требуют автоматического размещения. Другим примером могут быть производственные среды, которые должны поддерживать браузеры, которые плохо работают с сеткой CSS.
Автор: Chris Geelhoed
Источник: https://css-tricks.com
Редакция: Команда webformyself.