От автора: недавно моему сыну было поручено в течение недели присматривать за своим плюшевым мишкой на уроках дошкольного образования, и он должен был придумывать для него приключения и добавить свои воспоминания в альбом. Мне очень понравилось создавать этот макет альбома, и это заставило меня задуматься о том, как бы я создал что-то подобное с помощью CSS Grid!
Составные сетки
Энди Кларк выступил с фантастической речью «Вдохновленный CSS Grid» на конференции State of the Browser, которая была очень интересной для таких, как я разработчиков, пришедших из дизайна. В ней он рассказал о том, как идеи из полиграфического дизайна могут быть применены в Интернете для создания ярких макетов, и как CSS Grid делает это не только возможным, но и гораздо более простым, чем когда-либо прежде. Одним из таких принципов было использование составных сеток.
Большинство из нас, вероятно, знакомы с использованием сеток для веб-дизайна и разработки. Практически все дизайны веб-сайтов, которые мне было поручено создать, были привязаны к стандартной сетке из 12 столбцов (или иногда из 24 столбцов!), причем все столбцы имели одинаковую ширину. Пока все так предсказуемо.
Составные сетки, с другой стороны, создаются путем наложения двух или более сеток. Такие сопоставления, как сетка из 5 столбцов, наложенная на сетку из 4 столбцов, создают ритмические узоры и открывают больше возможностей динамического размещения, чем обычная сетка.
Рис. 2 Начнем с сетки из 4 и 5 столбцов
Рис. 3 Сетки накладываются друг на друга. Результатом является составная сетка
Это связано как с психологическим, так и с техническим аспектом — вполне возможно построить обычный макет без использования составной сетки, но такие сетки позволяют создать что-то более креативное!
Построение генератора составной сетки
Составные сетки хорошо транслируются в CSS Grid, поскольку использование блоков fr позволяет реализовать их очень просто. Мне нравится идея использования составных сеток в веб-дизайне, но я чувствовал, что процесс их вычисления (особенно для более сложной сетки) может быть помехой. Мне нужен был способ создания составных сеток по требованию, поэтому, вдохновленный докладом Энди, я засучил рукава и создал небольшой инструмент для генерации и визуализации составных сеток. Введите число столбцов для двух разных сеток (максимум 10 столбцов для любой одной сетки), и генератор объединит их, выделяя результирующее значение, которое можно использовать в свойстве grid-template-columns. Например, для сетки с четырьмя столбцами плюс сетка с пятью столбцами будут сгенерированы значения 4fr 1fr 3fr 2fr 2fr 3fr 1fr 4fr.
Этот инструмент размещен на Codepen, поэтому вы можете свободно использовать его или адаптировать под свои нужды.
Создание сетки для макета настенного альбома
Составная сетка идеально подходит для макета настенного альбома, который, по моему замыслу, должен иметь немного случайный и непредсказуемый макет, но при этом сохранять чувство ритма и баланса. После нескольких экспериментов с генератором составных сеток я остановился на составной сетке 6/5, которая, как мне показалось, давала достаточное количество столбцов для работы. Это моя начальная сетка для работы:
.grid { display: grid; grid-template-columns: 5fr 1fr 4fr 2fr 3fr 3fr 2fr 4fr 1fr 5fr; gap: 1rem;
}Определение строк сетки
Определение строк сетки было сложнее и требовало чуть больше проб и ошибок. Каждое фото в сетке должно перекрывать другое. Мне помогло то, что я примерно нарисовал сетку на бумаге, чтобы понять, сколько строк мне понадобится.
Чтобы сохранить чувство вертикального ритма, я решил, что фотографии должны перекрываться на одну и ту же величину. Я назначил это значение пользовательскому свойству, чтобы оно могло использоваться на всей странице и обновляться при необходимости (рис. 4).
Рис. 4. Изображения перекрываются вертикально
.grid { --verticalPadding: 2rem; --overlap: 6rem;
}Каждое изображение также имеет абзац сопроводительного текста. Для этого должно быть достаточно места сверху и снизу, чтобы оно не перекрывалось и не врезалось в предыдущую фотографию. Это означало добавление ряда сетки выше и ниже заголовка, который я считаю «рядом отступа». Поэтому каждое изображение должно занимать как минимум четыре ряда сетки — изображения, которые перекрываются сверху и снизу, должны занимать пять рядов.
Рис. 5. «Ряды отступа» позволяют поддерживать минимальный интервал между концом текстового блока и началом следующего изображения
Но мы еще не закончили с построением сетки: я решил задать пропорции для самих изображений, как у реальных фотографий. Некоторые будут иметь альбомную ориентацию, а другие — портретную. Я хотел, чтобы макет сетки работал независимо от соотношения сторон изображения или длины текста, поэтому мне нужно было, чтобы ряды сетки могли адаптироваться.
Вместо того, чтобы использовать фиксированные значения для рядов перекрытия и «отступов», мы можем сделать эти треки гибкими, используя minmax(). Это обеспечит минимальный размер этих треков рядов, но они также будут расширяться, если этого требует содержимое.
minmax(var(--padding, auto));
Размещение элементов
Когда мы получили «каркас» сетки, пришло время разместить некоторые элементы. Одна вещь, которая иногда может оказаться сложной — это определение лучшего способа размещения элементов в сетке для любого заданного макета. У нас есть ряд различных опций — номера строк, ключевое слово span, именованные строки или именованные области сетки — и некоторые из них работают лучше, чем другие в различных ситуациях. Но нет правильной или неправильной методологии, и все часто сводится к тому, чтобы найти метод, наиболее подходящий для вас.
Пока макет работает, нет такой вещи, которая была бы «неправильной»!
Размещение по сетке
Я часто начинаю с размещения элементов, используя начальные и конечные значения — обычно начальные и конечные номера строк, но если я знаю точное количество треков, которое должен охватить элемент, я буду использовать его, рассматривая это число как константу. Иногда я называю линии сетки для важных «ориентиров» (например, wrapper-start и wrapper-end), но я редко захожу так далеко, чтобы называть линии сетки или создавать области сетки для каждого элемента в сетке. Стратегия, которая мне очень помогает — это использование отрицательных линий сетки, когда я хочу разместить элемент относительно конца сетки, я писал об этом в предыдущей статье. Я чаще всего использую отрицательные линии сетки по оси колонок, так как в большинстве случаев (для сеток, с которыми я работаю) количество столбцов известно и фиксировано.
Например, если поместить элемент из строки 1 в строку -1 со свойством grid-column, этот элемент будет располагаться по всей оси колонки сетки, от первой строки до последней:
.item { grid-column: 1 / -1;
}Другой случай, когда я более склонен именовать линии сетки — это сетки с очень большим количеством треков. В данном случае у нас есть только 10 треков колонок, поэтому для меня размещение элементов по номеру строки на этой оси кажется управляемым.
Используя сочетание положительных и отрицательных линий сетки и значений диапазона, довольно просто разместить элементы по оси колонок. Включение инспектора сетки в панели инструментов разработчика Firefox очень полезно, так как это позволяет нам видеть номера рядов.
Размещение по сетке
Если мы посмотрим на нашу сетку, то увидим, что у нас достаточно большое количество рядов для работы.
Снимок экрана из инспектора сетки Firefox, на котором показаны столбцы и строки сетки
Хотя я начал размещать элементы по номеру ряда на оси рядов, этим быстро стало трудно управлять. Элементы должны перекрывать друг друга, и мне было трудно отслеживать, где один элемент должен заканчиваться, а другой должен начинаться. Кроме того, я не хотел использовать отрицательные линии сетки, потому что есть большая вероятность, что я захочу расширить макет в будущем. Если бы я добавил в сетку другие явные строки, то отрицательные номера строк перестали бы быть правильными, что потенциально могло бы вызвать много ошибок компоновки!
И тогда я решил создать именованные области сетки на оси рядов. Области сетки создаются двумя способами:
С помощью свойства grid-template-areas, которое позволяет эффективно «рисовать» макет сетки.
Используя именованные линии сетки, и -start и в -end качестве суффиксов к именам линий.
Свойство grid-template-areas не позволяет определить области для перекрытия элементов, поэтому оно не поможет нам с этой конкретной компоновкой. Однако использование именованных областей сетки определенно облегчит жизнь. Если мы назовем линии как рядов, так и колонок, мы получим область сетки:
Суффиксирование имен строк с помощью -start и -end создает область сетки
Затем мы можем ссылаться на эту область при размещении элемента, используя свойство grid-area:
.item { grid-area: image;
}Это делает наш код более кратким и более читаемым, чем при использовании grid-column и grid-row и выписывание имен рядов от руки:
.item { grid-row: image-start / image-end; grid-column: image-start / image-end;
}Но на этот раз нам нужна только именованная область сетки по оси рядов. Это нормально, так как мы можем просто сослаться на свойство grid-row:
.item { grid-row: image;
}Поскольку у нас есть большое количество рядов, я считаю, что гораздо проще задать свойство grid-template-rows по вертикали, чтобы оно отражало структуру страницы:
grid-template-rows: /* The first two rows deal with the header */ auto 3rem /* The rest of the grid content starts here */ minmax(var(--verticalPadding), auto) minmax(0, auto) minmax(var(--verticalPadding), auto) var(--overlap) minmax(var(--verticalPadding), auto) minmax(0, auto) minmax(var(--verticalPadding), auto) var(--overlap) minmax(var(--verticalPadding), auto) minmax(0, auto) minmax(var(--verticalPadding), auto);
Теперь добавлять имена рядов в нужном месте становится проще, поскольку мы можем визуализировать структуру сетки:
grid-template-rows: [header-start] auto [fig1-start] 3rem [header-end] minmax(var(--verticalPadding), auto) [p1-start] minmax(0, auto) [p1-end] minmax(var(--verticalPadding), auto) [fig2-start] var(--overlap) [fig1-end] minmax(var(--verticalPadding), auto) [p2-start] minmax(0, auto) [p2-end] minmax(var(--verticalPadding), auto) [fig3-start] var(--overlap) [fig2-end] minmax(var(--verticalPadding), auto) [p3-start] minmax(0, auto) [p3-end] minmax(var(--verticalPadding), auto) [fig3-end];
Осталось только сослаться на имена областей по оси рядов при размещении элементов сетки:
.fig--1 { grid-column: span 5 / -1; grid-row: fig1;
} .fig--2 { grid-column: 1 / span 7; grid-row: fig2;
} .fig--3 { grid-column: span 5 / -2; grid-row: fig3;
}Готовый результат доступен на Codepen.
Хотя я не приложил дополнительных усилий, чтобы сделать этот макет адаптивным, его можно использовать для экранов меньшего размера, чем у планшета. Корректировка макета для экранов небольшого размера теперь будет относительно простой. При меньших размерах экрана я лично выбрал бы более простую сетку, так как мы, вероятно, потеряли бы много визуальных нюансов. Но, опять же, в этом нет ничего правильного или неправильного — и даже те из нас, кто регулярно работает с CSS Grid, все еще понимают, что им есть куда расти!
Автор: Michelle Barker
Источник: https://css-irl.info
Редакция: Команда webformyself.