Некоторые стратегии CSS Grid для создания согласованных макетов дизайна

Некоторые стратегии CSS Grid для создания согласованных макетов дизайна

От автора: в мире веб-разработки всегда наблюдался разрыв при переходоме от дизайна к разработке. Амбициозные дизайнеры хотят, чтобы конечный результат их усилий выглядел уникальным и красивым (и соответствовал их первоначальному видению), тогда как многие разработчики находят большую ценность в результате, который является последовательным, надежным и стабильным (и легко кодируемым). Эта динамика может привести к напряженности между двумя сторонами, при этом эти стороны стремятся направить свои действия по-своему.

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

Распространенные способы, которыми дизайнеры дают инструкции для разработчиков интерфейсов — это макеты дизайна (под макетами мы понимаем результаты, созданные в Sketch, XD, Illustrator, Photoshop и т. д.). Все дизайнеры в некоторой степени работают по-разному (как и разработчики), но многие любят основывать структуру своих макетов на какой-то сетке. Согласованная сеточная система имеет неоценимое значение для понимания того, как должна кодироваться веб-страница и как она должна адаптироваться, если размер экрана пользователя отличается от макета. Как разработчик, я очень ценю дизайнеров, которые стараются принять хорошо продуманную сеточную систему.

Макет с 12 столбцами особенно популярен, но распространены и другие шаблоны. Такое программное обеспечение, как Sketch и XD, позволяет легко создавать страницы, которые следуют заданному макету столбцов — вы можете включать и выключать наложения одним нажатием кнопки.

Некоторые стратегии CSS Grid для создания согласованных макетов дизайна

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Макет сетки, разработанный в Sketch (слева) и Adobe XD (справа)

После того, как сеточная система внедрена, большинство элементов дизайна должны располагаться прямо внутри нее. Такой подход обеспечивает равномерное выравнивание фигур и делает его более привлекательным. В дополнение к визуальной привлекательности, предсказуемая сетка дает разработчикам четкую цель для поиска при написании стилей.

К сожалению, этот базовый шаблон может быть обманчиво сложным для точного кодирования. Фреймворки, такие как Bootstrap, часто используются для создания макетов сетки, но они имеют свои недостатки, такие как добавленный вес страницы и отсутствие детального контроля. CSS Grid предлагает лучшее решение для перфекционистов. Давайте рассмотрим пример.

Некоторые стратегии CSS Grid для создания согласованных макетов дизайна

Сетка с 14 столбцами

Дизайн выше — хорошее приложение для сетки. Существует 14-столбцовый шаблон с несколькими элементами, расположенными в нем. Хотя все блоки имеют разную ширину и смещения, все они придерживаются одной и той же сетке. Этот макет может быть создан с помощью flexbox — и даже float — но это, вероятно, потребовало бы некоторой очень специфической математики для получения идеального попиксельного результата во всех контрольных точках. И давайте посмотрим правде в глаза: у многих разработчиков фронт-энд недостаточно терпения для этого. Давайте рассмотрим три стратегии компоновки CSS сетки для более простого выполнения этой работы.

Стратегия 1: Базовая сетка

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

Это правило определяет сетку, состоящую из 12 столбцов, каждый из которых имеет ширину в одну часть (fr). Между столбцами также указан зазор в 20 пикселей. Начало и конец любого дочернего столбца могут быть легко установлены с помощью свойства grid-column. Например, установив grid-column: 3/8, мы размещаем этот элемент с пятой до восьмой колонки.

Мы уже можем видеть пользу в том, что предоставляет CSS-сетка, но у этого подхода есть некоторые ограничения. Одной из проблем является Internet Explorer, который не поддерживает свойство grid-gap. Другая проблема состоит в том, что этот подход с 12 колонками не дает возможности начинать столбцы в конце зазоров или заканчивать столбцы в начале зазоров. Для этого нужна другая система.

Стратегия 2: Более гибкая сетка

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Хотя grid-gap может и не работать в IE, зазоры можно воссоздано путем включения пробелов в состав самого шаблона сетки. Функция repeat доступна для grid-template-columns и принимает в качестве аргумента не только ширину колонки, но повторяющиеся шаблоны произвольной длины. С этой целью шаблон column-then-gap может повторяться 11 раз, а затем мы можем вставить последний столбец для завершения желаемой схемы внутреннего зазора с 12 столбцами / 11 зазорами.

Это позволяет обойти проблему IE, а также позволяет рядам начинать и заканчивать и на колонках, и на зазорах. Это хорошее улучшение по сравнению с предыдущим методом, но его все равно можно усовершенствовать. Например, что если колонка должна располагаться так, чтобы одна сторона охватывала внешний край экрана, а другая соответствовала сетке? Вот пример:

Некоторые стратегии CSS Grid для создания согласованных макетов дизайна

Макет сетки с элементом, находящимся на одном уровне с внешним краем

В этом макете карточка (наша левая колонка) начинается и заканчивается в сетке. Основное изображение (правая колонка) также начинается в сетке, но простирается за сетку до края экрана. Создание CSS для этого сценария может стать проблемой. Один из подходов может заключаться в том, чтобы расположить изображение абсолютно и прикрепить его к правому краю, но это связано с недостатком выведения его из потока документов (что может быть проблемой, если изображение выше карточки). Другой способ — использовать float или flexbox для поддержания потока документа, но это повлекло бы некоторые хитрые одноразовые вычисления, чтобы получить правильную ширину и интервал. Давайте рассмотрим лучший способ.

Стратегия 3: Еще более гибкая сетка

Этот метод основан на идее, представленной в последней редакции спецификации. Вместо того, чтобы сетка существовала в других элементах, определяющих размеры зазоров и ширину рядов, мы интегрируем эти пространства с шаблон сетки. Поскольку все отступы, колонки и зазоры включены в шаблон, дочерние элементы можно легко и точно расположить в сетке с помощью свойства grid-column.

Да, чтобы сделать это правильно, нужна математика. Важно, чтобы шаблон был установлен по-разному до и после реализации максимальной ширины строки. Я решил использовать для этого SCSS, потому что определение переменных может сделать вычисления намного более управляемыми (не говоря уже о том, что они более читабельны для других разработчиков). То, что начиналось как шаблон из 12 частей, разрослось до шаблона из 23 частей с интеграцией 11 внутренних зазоров, и теперь составляет 25 частей с учетом левого и правого зазоров.

Одна из замечательных особенностей этого подхода заключается в том, что его можно использовать в качестве основы для любого макета, который привязывается к сетке после установки шаблона, включая традиционно неудобные макеты, которые включают колонки, охватывающие внешние края. Более того, он служит простым способом точной реализации проектов, которые, вероятно, будут переданы в виде качественных макетов. Это то, что должно порадовать как разработчиков, так и дизайнеров!

Есть несколько предостережений …

Хотя эти методы могут использоваться, чтобы решить традиционные проблемы моделирования, они не является панацеей. Вместо этого их следует рассматривать как альтернативные инструменты для правильного применения.

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

Автор: Chris Geelhoed

Источник: https://css-tricks.com

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий