Golden grid что это

Обновлено: 02.07.2024

Большая часть людей, так или иначе причастных к верстке сайтов, проходят через… Назовем это “путь бутстрапа”. Это такая философская позиция, когда у тебя есть 12 колонок и ничего больше. Ты берешь элементы, кладешь их в определенные колонки и все у тебя хорошо. Можно выключить мозг, погрузиться в нирвану и руки будут сами расставлять элементы. Красота… Но тут появляется современный дизайнер, который рисует что-то, что ну совсем не сходится с этой замечательной концепцией. Колонок явно больше, они все разной ширины, да еще и по высоте что-то нужно выравнивать. Жуть. А встречается такое все чаще, особенно если сделать шаг в сторону от магазинов или админок. Сегодня мы поговорим о том, что же это за чудо такое там используется и как его можно готовить в современном CSS. Кода будет совсем немного, в основном – размышления и картинки.

У традиционных художников есть очень классная штука – своеобразная сетка из диагоналей и добавленных к ним перпендикулярных линий, которая не только помогает строить стандартные композиции, но и позволяет вручную переносить изображение между холстами с разными пропорциями, сохраняя при этом эти самые композиции. Я не знаю, кто и когда ее придумал, но изобретение явно не новое. Если вы будете листать глянцевые журналы достаточно продолжительное время, то заметите, что и там есть определенные закономерности, которые не зависят от размеров элементов, и сохраняются при разных пропорциях страниц или блоков, выделенных под контент. Там это вроде как связывают с термином “типографические модульные сетки”. Вообще в книгопечатании издревле было модно заморачиваться по поводу пропорций, композиций и соотношений. Многие известные в свое время типографы и архитекторы придумывали свои каноны, как лучше/проще/красивее делить прямоугольник без линейки с делениями. Некоторые из них были привязаны к пропорциям бумаги, ну а некоторые позволяли работать с любыми прямоугольниками. И вот, этот подход с отталкиванием от композиции вне зависимости от пропорций носителя информации медленно, но верно, приехал к нам, в веб, потеснив отталкивание от колонок, по крайней мере в контексте рекламных и “вау”-сайтов. Собственно речь идет о сетке, широко известной в узких кругах, которую в последние пару лет часто называют “golden canon grid”, а до этого как я понимаю просто использовали без конкретного названия.

Гриды с медиа запросами

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

Это делает CSS Grid идеальным для медиа запросов. Мы можем просто переназначить значения в ASCII-графике и обернуть результат в конечный медиа запрос.

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

А вот соответствующий код для мобильной версии:

Таким образом, все дело состоит в переназначении значений в свойстве grid-template-areas .

В нашем случае мы обернули мобильную версию в медиа запрос, как тут:

Обратите внимание, что мы также подкорректировали значения в grid-template-rows и в grid-template-columns , чтобы они подходили под новый шаблон. В частности, тут должна быть только одна колонка и она должна занимать все свободное место. А так как все грид элементы будут в одну кучу, мы назначим 5 строк и определим их высоты.

Учимся считать до 20

Перед тем, как перейти к практической части и написанию кода, хотелось бы сказать пару слов о подсчете блоков в такой сетке. Ее можно одновременно отобразить как в макете, так и на странице (через background-image размером в 100% на 100% для контейнера с сеткой), но считать все равно придется.

Лично мне кажется удобным при таком подходе покрасить сетку на куски 5x5 блоков и ориентироваться по ним:

Считать от 1, 5/6, 10/11, 15/16, 20, добавляя или вычитая числа от 1 до 5 не так сложно, единственное что может немного путать – это вычитание (поначалу все ошибаются на единицу в ту или иную сторону), но это быстро проходит. Вы конечно спросите, а почему бы не считать с 0, как нормальные люди? А дело в том, что в CSS Grid счет идет с 1.

Изменяем шаблон

Вы можете изменить шаблон просто перераспределив грид-области в grid-template-areas .

Таким образом, если мы сменим на это:

То в результате получим такой шаблон:

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

Для примера, чтобы сделать так:

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

А что там с адаптивностью?

Практика показывает, что такие сайты проектируются под горизонтальные экраны, а сетка позволяет сохранить красивый внешний вид на разных их пропорциях – fullhd, повернутый iPad, повернутый Nexus 7 – везде будет хорошо. Есть две основных ситуации, когда что-то нужно менять:

Слишком маленькая высота вьюпорта (очень широкий, но низкий — бывает если изменить размер окна вручную или если на планшете клавиатура показывается).
Высокий, но узкий вьюпорт, когда “разворот на две страницы” не влезает по ширине и деформируется (телефоны, планшеты в вертикальной ориентации).

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

Вертикальная мобильная версия нужна в первую очередь для потребления контента. Там уже не получится развернуться и делать гигантские отступы в угоду красоте и произведению впечатления. Обычно постраничный скролл отключается, сетка отходит на второй план (вплоть до того, что всем ее элементам делается display:block) и остается важным только вертикальный ритм, который получается больше из отступов, связанных с размером шрифта. Хотя иногда бывают исключения, когда и на маленьких экранах дизайнер умудряется все красиво расставить. В таком случае мы просто меняем свойство grid-area на новое и выравниваем текст в нужную сторону.

Важным моментом являются брейкпоинты, на которых все перестраивается. Есть сторонники привязывания их к размерам популярных устройств, но здесь регулярно случаются ситуации, когда после добавления таких точек все получается не очень – или на мобильной версии можно было бы и больше уместить, или на середине планшетной стоит уже что-то убрать или переставить и.т.д. Все упирается в изначальный дизайн для большого экрана. Так что часто процесс адаптации приходит к концепции content-first или вариациям на эту тему, когда за основу берется содержимое и точки выбираются исходя из соображений дизайна, удобства, а не размеров экранов популярных устройств. То есть первичен контент, важно, чтобы его было удобно потреблять в задуманном виде, а мобильные, планшентые и десктопные версии – это уже вторично. Это просто названия для инструментов, но не основа. Да, это может приводить к тому, что брейкпоинтов будет больше обычных 2-3, может получиться 5 или даже 7, но такой подход позволяет сделать верстку, которая красиво выглядит на любых размерах экранов в обозначенных пределах.

В чём прикол сеток типа Golden Grid System и Frameless?

Ksider: я понял. Тогда можно я, если не против, ещё немного поинтересуюсь, а то совсем плаваю.

Вот там, на самом сайте GGS, уже есть некий пример сетки. Я так понимаю, что гармошка представляет собой условную строку, так? Допустим. Далее, я пытаюсь вставить контент сюда:

Но при сужении окна браузера, он исчезает в мехах этого аккордеона. Где я алень?

Как это работает?

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

Чтобы создать Grid разметку, вам просто нужно выставить элементу display: grid . Этот шаг автоматически сделает всех прямых потомков этого элемента — grid элементами. После этого вы можете смело использовать разнообразные grid свойства для выравнивания размеров и позиционирования элементов должным образом. Обычно первым шагом является определение того, сколько колонок и рядов есть в гриде. Но даже это опциональный момент — как вы увидите далее.

Это пример грида с четырьмя рядами и тремя колонками. Он состоит из 12 grid элементов. Каждый из этих элементов отмечен зеленым и между ними есть небольшое расстояние.

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

Создаем Grid

Вот пример простого 3x3 грида с небольшими отступами между элементами.

Давайте внимательнее вглядимся в код. HTML разметка для CSS Grid выглядит вот так:

Таким образом мы видим обычный HTML, состоящий из элементов, вложенных в свой внешний элемент. Но именно для наших целей, внешний <div> это контейнер гридов. Соотвественно, все элементы вложенные в него будут являться грид элементами.

Но по факту, это не будет полноценными гридом, пока мы не применим кое-какой CSS для него. Вот код, который создаёт его:

Вот объяснение того, что написано в этом CSS:

Превращает элемент в grid контейнер. Это все, что нужно для того, что создать грид. Теперь у нас есть грид-контейнер и грид-элементы. Значения гридов создают блочный контейнер. Вы так же можете использовать display: inline-grid , что создать строчный грид-контейнер. Или же вы можете использовать display: subgrid , чтобы создать подсетку, это значение используется на самих grid элементах.

grid-template-rows: 1fr 1fr 1fr

Выстраивает ряды в гриде. Каждое значение представляет размер ряда. В этом случае все значения равны 1fr. Очень подробно и понятно про (fr) можно почитать тут.

Но конечно же, для этого можно было бы использовать разные значения, такие как 100px , 7em , 30% и так далее. Вы также можете назначать имена строкам вместе с их размерами.

grid-template-columns: 1fr 1fr 1fr

Тоже самое, что и выше, только определяет колонки в гридах.

Выставляет разрыв. То есть пробелы между грид элементами. Тут мы используем vw единицу, которая относительна ширине viewport, но также мы можем использовать 10px , 1em и т. д. Grid-gap свойство это сокращение для grid-row-gap и grid-column-gap свойств.

Ну, а другая часть кода просто назначает разные стили грид элементам.

Функция repeat()

Вы можете использовать функцию repeat() для повторяющихся объявлений значения размера элемента. Для примера, вместо того, чтобы делать это:

Мы можем сделать так:

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

Явные и неявные гриды

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

Явный грид — это грид, который вы определяете в grid-template-rows , grid-template-colums и в grid-template-areas .

Тем не менее, вы все еще можете иметь элементы, которые не умещаются в вашу «явно» указанную сетку. Для примера, вы определили грид который может уместить только шесть элементов, но сам контейнер на самом деле состоит из девяти элементов. Только шесть элементов будут умещаться в явный грид и три останутся. И вот уже начинаются неявные гриды.

Неявные гриды автоматически генерируются самим грид-контейнером всякий раз когда грид-элементы располагаются за пределами явного грида. Контейнер генерирует неявные грид треки, добавляя неявные строки в грид. Эти строки вместе с явными гридами и формируют как таковые неявные. Вот пример:

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

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

Система сеток для фигма по принципу золотого сечения

Если ты фанат теории золотого сечения, инопланетян и канала РЕН-ТВ, то обязательно должен работать только по этой сетке. Ее мне предоставил сам Лео Да-Винчи, так же он любезно создал эту систему для десктопа и смартфона.

Кстати, будь внимательным, в этой системе зашифровано все Тайное Знание человечества.

Логика поведения важнее конкретных чисел

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

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

Верстаем

Возвращаемся к картинкам, на которых отмечали расположение блоков на макетах, и начинаем верстать. Ничего не измеряем, никаких пикселей, только номера ячеек в таблице. Начнем с фиолетового концепта.

Смотрим на расположение фото с девушкой – начинается с левой границы, занимает половину по вертикали и чуть больше половины по горизонтали. В контексте сетки – начинается с ячейки [11, 1] и простирается на 10 вниз и на 12 вправо. На самом деле, если немного попрактиковаться, то можно будет с большой точностью угадывать эти числа, не считая ячейки.

Едем дальше — левая фоновая картинка. Занимает все 20 ячеек по высоте и шесть по длине. Начинается с седьмой? Глазомер может обманывать, проверяем – все верно.

Таким образом проходим по всем объектам на странице:

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

Расположение блоков на первой странице готово. Переходим ко второй и действуем аналогичным образом:

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

Остается задать цвета элементам, вставить картинки, написать тексты и добавить повороты на 90 градусов (через CSS-трансформацию rotate) и выравнивание влево-вправо и вверх-вниз для них. Но это все мелочи – главное, что самая проблемная задача с позиционированием решилась быстро и просто.

Выставляем размер трека для неявных гридов

Возможно вы заметили, что дополнительный ряд не такой в высоту как предыдущие два. Это потому, что мы выставили высоту строки в grid-template-rows свойстве, но применяется она только для явных гридов. Высота строки на неявных гридах должна выставляться с помощью свойства grid-auto-rows . Но так как мы этого не сделали, выходит, что неявный ряд использует размер трека auto , который основывается на контенте. Вот так располагаются свойства выставления размера трека:

В общем выходит так:

Явный грид использует grid-template-rows и grid-template-columns

Неявный грид использует grid-auto-rows и grid-auto-columns

В следующем примере мы сделаем явные и неявные строки одной высоты ( 60px ).

Опциональное значение dense

У grid-auto-flow также есть опциональное значение dense , которое может помочь в создании компактного грида и предостеречь от больших пробелов между грид-элементами в случае непоследовательных размеров всех грид-элементов в контейнере. К примеру, у вас есть вот такой грид:

Auto-flow — строки или колонки

Пока что мы создавали только дополнительные строки, чтобы уложить дополнительные грид-элементы. Но что, если мы хотим использоваться дополнительные колонки?

Для этого у нас есть свойство grid-auto-flow

Это свойство позволяет указывать, что нужно использовать для авто-размещения элементов, строки или колонки. Другими словами, вы можете указать как будет расти неявный грид — в виде строк или колонок. Изначальное значение тут — row , что объясняет то, почему на примере выше были добавлены дополнительные строки, вместо колонок. Но если вы предпочитаете использовать колонки, то вы можете использовать это:

Вот что случится, если мы применим это к первому примеру.

Само собой, вы можете попробовать пойти дальше в этом примере и использовать grid-auto-columns свойство, чтобы изменить ширину автоматически сгенерированной колонки. Так что если вы хотите, чтобы все колонки выше, были одинаковой ширины, вам надо использовать grid-auto-columns: 1fr .

Имейте ввиду, что выставляя column для grid-auto-flow вы изменяете поток грид элементов. Вы уже могли заметить, что грид элементы в примере выше размещаются вдоль каждой колонки, вместо каждой строки.

Создаем шаблон сайта с CSS Grid

Гриды включают в себя интуитивный «ASCII-графический» синтаксис, в котором вы можете виртуально «видеть» шаблон в коде, поэтому становится очень легко создавать и изменять сам шаблон. Даже значительные изменения могут быть сделаны за несколько секунд. Этот интуитивный синтаксис также помогает с адаптивным веб-дизайном. Создание разных шаблонов для разных устройств становится довольно пустяковым делом при использовании грид разметки.

Давайте теперь создадим шаблон сайта, который выглядит таким образом:

А вот код этого шаблона:

Давайте ближе посмотрим на наш код. HTML разметка выглядит таким образом:

Итак, мы сделаем <body> грид-контейнером, таким образом все другие элементы станут грид-элементами.

А теперь давайте посмотрим на ASCII-графику, о которой мы говорили прежде.

Подробнее про grid-template-areas вы можете прочитать в статье Поразительный CSS Grid Area

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

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

Теперь мы можем назначить каждую из этих грид-областей каждому элементу:

Свойство grid-area это сокращение свойства, которое позволяет вам размещать грид-элементы в гриде. В нашем случае, мы просто отсылаемся к названиям, которые мы уже предварительно указали в grid-template-areas .

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

Следующий код выдает размеры строкам и колонкам:

Первая и третья строки — обе в 60px высотой, а вторая строка забирает все оставшееся место.

Первый столбец равен 20% , а третий 15% . Второй же забирает все оставшееся место.

Подводя итоги

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

Вёрстка на Grid в CSS. Полное руководство и справочник

Эта статья показывает как работает эта сравнительно новая технология, именно работает, а не имеет только описание свойств с поверхностными примерами.

Сама статья является адаптивным дополненным переводом CSS Grid Tutorial

Введение

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

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

Флоаты в конечном итоге заменили таблицы как всеобще приемлемый и рекомендованный метод создания разметки шаблона, так как он позволяет нам позиционировать элементы вне зависимости от изначальной разметки. Тем не менее, пока этот метод считался значительным улучшением на фоне табличной верстки, у него тоже были свои ограничения. Флоаты в основном были разработаны для создания шаблонов документов и они не совсем были подходящими для создания сложных шаблонов приложений, которые сейчас распространены в сети и которые мы привыкли видеть в своих браузерах. Флоат элементы сложно контролировать, особенно на девайсах и viewport’ах разных размеров. Это привело к различным гридободобным хакам, которые уже стали нормой, большинству из них требовалась дополнительная разметка, которая отвлекала от общей концепции разделения контента. Таким образом рабочая группа CSS находилась в поиске наилучшего решения для всех задач.

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

Хотя flexbox уже позволил разработчикам начать уходить от флоат элементов, но он работает только в одном измерении. Grid CSS же это делает в двух, таким образом лучше подходя для создания сложных, комплексных шаблонов.

Вёрстка на Grid в CSS. Полное руководство и справочник

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

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

С этим мощным функционалом и интуитивно понятным синтаксисом, шаблоны на grid несомненно будут менять представление о создании веба как такового.

Магические проценты против системы

Если делать верстку подобных страниц по-старинке, абсолютным позиционированием, не привязываясь к сетке, то это занятие превратится в бесконечное копирование самых разных чисел, обозначающих проценты или пиксели для свойств top, left, right и bottom в CSS. Это будет просто гора магических чисел, в которых невозможно ориентироваться, которые совершенно невозможно проверить “на глазок”, не говоря уже о хоть какой-нибудь системе. А хотелось бы выразить все в простом и понятном наборе чисел, как с колонками у бутстрапа. Тут помимо удобства еще стоит вопрос постоянства, непротиворечивости, или, как это модно говорить, consistency. В нашем контексте, если набор размеров и положений элементов не ограничен, то очень сложно поддерживать постоянство и все на страницах начинает “плясать” в разные стороны. Это вечная болезнь сайтов, не имеющих руководства по стилю, заложенного непосредственно в код и головы разработчиков.

Чтобы вы прочувствовали всю боль, представьте, что элемент навигации повернут на 90 градусов, выровнен своим верхним (оказавшимся теперь слева) краем по сетке в правой части страницы, но его высота (теперь ширина) меньше ширины ячеек сетки, в которых он расположен, и люди, не знающие о сетке, по привычке измеряют расстояние от его нижнего (теперь правого) края до правой части окна браузера, как самое маленькое, но это расстояние уже не имеет ни малейшего отношения к сетке. Это расстояние от правого края экрана до направляющей линии сетки минус размер условного текста с определенной высотой строки в этом конкретном элементе. И таких элементов на странице десятки. И их положения в CSS не имеют никакого отношения к сетке, хотя они по ней по идее выравниваются. Тут нужно бы вставить картинку из первого Black Ops, где герой видит числа. Много чисел.

А что, если я скажу вам, что во всем этом есть система? Давайте наложим нашу “кривую” сетку 20x20 на вышеупомянутые страницы и просто посмотрим.

Ух ты. Все элементы расставлены ровно по сеточке. Вопрос только в том, в какую сторону в них выровнен текст – влево, вправо, вверх или вниз, но положение самих блоков явно не случайное. Давайте посмотрим второй пример:

И снова, все расположено не случайно. Единственный элемент, который слегка выбивается – текст в центре. Но присмотревшись становится понятно, что он немного сдвинут вправо (показано стрелочками), но если трансформацию убрать, то он точно также ровно встанет на свое место, которое я обвел розовым цветом.

Какой бы странной не казалась сетка на первый взгляд, она вносит систему в дизайн, и было бы логично эту систему сохранить и в коде. Располагая все строго по сетке и используя CSS-трансформации по мере необходимости мы делаем код более понятным и поддерживаемым.

Возможно вы видели сайты с такого рода дизайнами и множеством анимаций (даже если там нет WebGL и сложных переходов между страницами, то уж wow.js точно есть почти всегда). Так вот, там все верстается точно также по сетке, а все появления элементов происходят с помощью CSS-трансформаций, когда элемент заранее “вынимается” из сетки трансформацией, а потом анимируется в изначальное состояние.

Важно отметить тонкий ромб вокруг девушки. Можно подумать, что он вылетел из системы влево, но это только на первый взгляд. На самом деле он привязан не к ней, а к картинке, а “вылетел” он лишь за счет неравномерности сетки.

Создаем адаптивный Grid

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

Пример использования Auto-fill :

Измените размер браузера, чтобы увидеть, что происходит. Если вы смотрите с мобильного устройства, то попробуйте посмотреть с десктопа. Посмотрите разницу.

Код отвечающий именно за это:

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

Repeat() функция повторяет определение трека количество раз, заданное первым параметром. Использование auto-fill заставит треки повторяться такое количество раз, пока они не заполнят контейнер.

Размер этих треков указан во втором параметре. В нашем случае, мы используем minmax(150px, 1fr) , чтобы указать то, что минимальный размер столбца равен 150px , а максимальный 1fr .

Пример с Auto-fit

auto-fit работает практически также, как и auto-fill . Разница тут только в том, что auto-fit стягивает все пустые треки в конце размещения, в то время как auto-fill нет. Лучший способ тут, это демонстрация со сравнением.

Использование двух маленьких грид элементов тут поможет показать всю концепцию работы. Auto-fill оставляет пустые треки в конце по указанным размерам, а auto-fit растягивает пустой трек, что ведёт к заполнению треков растянутыми элементами для заполнения пространства.

Совмещаем grid c block

В зависимости от требований к вашему шаблону, нет ничего, что остановит вас изменить мобильную версию на display: block . Как тут:

Это будет работать также как и в примере выше, но по-дефолту, элементы встанут по своему исходному порядку. В примере выше, мобильная версия имеет nav под ads , но если бы мы использовали display: block , то nav был бы выше ads .

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

Гриды в CSS – золотая пуля

Помните тот челлендж, когда что-то делается в 30 строк кода? Так вот, такую страницу вполне можно сверстать в 30 строк и при этом код будет вполне понятным. Не верите? Ну давайте посмотрим.

Современный CSS предоставляет нам замечательную возможность сделать такую сетку – гриды. Они как будто специально сделаны под эту задачу. С помощью свойств grid-template-columns и grid-template-rows можно задать соотношения между размерами наших блоков, нужно только их посчитать.

Вооружившись калькулятором сделать это несложно. А если под рукой есть уже нарисованная сетка с направляющими, то это превращается в чисто механическую задачу. Если взять первую ячейку в строке или столбце за 1, то получится последовательность размеров 1, 1, 2, 4, 2.66, 5.33 и.т.д. Это размеры ячеек относительно первой в случае сетки с 20 строками или колонками и теми направляющими, что и в наших примерах. Если у вас в проекте другое количество ячеек в сетке — придется пересчитать все самостоятельно. Подставим их в вышеупомянутые свойства:

Не так уж и сложно. Обычно нужно растянуть сетку на весь экран и задать ей позиционирование, так что сделаем это. Можно на фон вывести картинку с сеткой, чтобы проверять себя по ней:

На этом сетку можно считать готовой.

Много пространства, мало контента

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

Мы воспользуемся ими, как примерами использования нашей сетки. Но для начала стоит сказать пару слов про пропорции и негативное пространство. Если вы не знаете, что это такое, то очень рекомендую почитать книгу “Дизайн для недизайнеров”.

На таких сайтах у нас обычно есть три типа элементов – текст, картинки или видео и декоративные фигуры. Начинающие, а иногда и не очень начинающие верстальщики берут макет и начинают в лоб копировать размеры всего этого в пикселях. Включая отступы. И размеры шрифтов. В результате при изменении пропорций окна браузера все “съезжает” и выглядит уже не так здорово. Это происходит из-за того, что ломаются свойства элементов, связанные с размером шрифта в них (включая примерное количество букв или слов в строках, радиусы закруглений и.т.д.), и перераспределяется негативное пространство. И если вопрос со шрифтами еще можно решить с помощью CSS-шлюзов, адаптивной типографики и задания размеров всего в REM/EM (как на том же Smashing Magazine к примеру), то с негативным пространством нужны меры посерьезнее. И на помощь приходит именно наша странная сетка.

Golden canon grid

Обычно, когда звучат слова “золотой”, “канон” и “дизайн”, люди вспоминают разные замороченные геометрические построения, что-то в этом духе:

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

Видно, что сетка состоит из разного размера ячеек. Они все разные! И их очень много! А-а-а-а-а-а.

Любой верстальщик-перфекционист сейчас должен убежать:

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

Если вы еще помните школьную геометрию, то скорее всего уже догадались, что тут хитро спрятана задача о делении отрезка на равные части с помощью циркуля и линейки. И оно так и есть. В конечном счете мы получаем линии, которые отсекают от листа 1/2, 1/3, 1/4, 1/6, 1/8 и.т.д. На самом деле в современном мире даже строить ничего не нужно – компьютер может сам все поделить, но все же ради кругозора полезно знать, как это строится дедушкиным способом.

Я не знаю, есть ли какие-то названия у элементов этой сетки в художественном мире, но мы будем использовать термины “строки”, “столбцы” и “блоки” или “ячейки”, поскольку они ближе всего к миру CSS. Самое большое количество строк и столбцов в такой сетке, которой мне встречалось – 20, как и на картинке выше. Иногда бывает меньше, когда было сделано меньшее количество шагов при построении сетки. Думаю, что больше 20 делать смысла нет, т.к. разница в размерах шрифтов на разных экранах почти нивелирует разницу между более мелкими блоками при большем количестве строк и столбцов.

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

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

Читайте также: