Сетка товаров html css

Дизайн макета страницы с товарами при помощи Flexbox

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

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

Flexbox помогает нам создавать гибкие макеты, адаптирующиеся как под настольные компьютеры, так и под мобильные устройства. Но почему мы его не используем? Многие из нас до сих пор используют обтекания и display: inline-block. Конечно, вы лучше знаете свою аудиторию. Если у вас множество пользователей используют, к примеру, IE9 и ниже, а вы не можете обеспечить соответствующий фолбек, то вы застрянете в обтеканиях. Однако flexbox сегодня поддерживается большим количеством браузеров.

Я верю в то, что можно чему-то научиться, практикуясь в этом. В этой статье я расскажу вам про недавно вышедшею бесплатную тему Venture для сайта Shopify, а также про то, как воссоздать макет товаров из темы на Flexbox.

Онлайн курс по JavaScript

Научитесь создавать приложения со сложными интерфейсами

Это основной язык для современной веб-разработки — почти 100% сайтов работает на JavaScript. Освойте его с нуля всего за 4 месяца, и вы сможете зарабатывать от 70 000 рублей.

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

Основано на теме Venture

Команда дизайнеров темы с сайта Shopify недавно выпустила довольно привлекательный шаблон для продавцов под названием Venture. Макет оптимизирован с уклоном на удовольствие от покупок, а также он фокусирует внимание исключительно на товарах. Макет был разработан для работы в нескольких бизнес-кейсах, но в этом уроке-примере мы сосредоточимся на ядре макета и воссоздании его при помощи flexbox. Далее мы изучим, как центрировать элементы, сделать идеальный прилипающий футер, обеспечить приоритет определенных товаров в зависимости от размера экрана и устройства, получить доступ к flexbox элементам при помощи медиа запросов, а также изучим основы Flexbox. Сделаем все, чтобы в следующем своем проекте вы могли сразу начать использовать Flexbox.

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

Макет Header

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

Начнем с создания flexbox контейнера с этими элементами:

Источник

Секция товаров

Разберём пример создания секции со стандартной сеткой карточек, например товаров интернет-магазина.

Выделим основные блоки (компоненты):

• Секция (класс section ) — представляет произвольный раздел с необязательным заголовком.
• Контейнер (класс container ) — обёртка задающая ширину контента и центрирование.
• Сетка (класс grid ) — отвечает за геометрию и расположение элементов.
• Карточка товара (класс product ) — компонент содержащий информацию о продукте.

Блок section ​

К секции можно добавить модификаторы на цвет фона в зависимости от темы, и многое другое.

section class="section">   h2 class="section__heading">h2> section> 

Блок container ​

Используется не только в секциях, поэтому это отдельный блок.

section class="section">   div class="container"> h2 class="section__heading">h2> div> section> 

Блок grid ​

У сетки есть только один элемент, grid__item , он будет отвечать за финальный размер карточки товара и за расстояние между карточками. То есть сетка и её элементы это flex-контейнер который берёт на себя задачу позиционирования чего-либо, например карточек товара.

section class="section"> div class="container"> h2 class="section__heading">h2>    ul class="grid"> li class="grid__item">. li> li class="grid__item">. li> li class="grid__item">. li>  . ul> div> section> 

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

Блок product ​

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

article class="product"> img class="product__image" /> h2 class="product__name">h2> p class="product__price">p> button class="button" type="button">button> article> 

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

Всё вместе​

Собираем секцию товаров из готовых компонентов, и добавляем оформление.

Источник

Как создать сетки на CSS Grid Layout

CSS Grid Layout — это способ разметки, который позволяет создавать на странице простые и сложные двумерные сетки. Вы можете добавить любое количество столбцов или строк и указать, сколько ячеек должен занимать каждый элемент.

Например, с помощью гридов легко создать такой раздел:

Как создать сетку на гридах

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

Описать количество и размеры столбцов — grid-template-columns .

Описать количество и размеры строк — grid-template-rows .

Например, так создаётся сетка из двух столбцов шириной 200px и двух строк высотой 150px :

Как задать размеры столбцов и строк

В процентах. Ширина колонки и высота ряда считаются относительно родительского контейнера. Например, grid-template-columns: 50% 50% создаст две одинаковые колонки шириной в половину родительского элемента.

В пикселях. Устанавливает точную ширину столбца или высоту строки — мы так делали в примере с котами: grid-template-columns: 200px 200px .

С помощью ключевого слова auto. Размеры вычисляются автоматически, в зависимости от свободного пространства.

C помощью ключевого слова fr (fraction). Всё пространство в сетке делится на равные доли fr . Например, колонка grid-template-columns: 1fr растянется на всю область родительского контейнера. А если написать grid-template-columns: 1fr 2fr , вы получите две колонки, при этом вторая будет в два раза шире.

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

В этом примере мы создаём четыре колонки. У первой фиксированная ширина, последняя занимает 25% пространства, а вторая и третья делят оставшееся пространство на две равные доли.

Как разместить элементы в гриде

По умолчанию все элементы располагаются в гриде слева направо сверху вниз и занимают одну ячейку сетки. Нумерация считается по линиям, как на картинке:

Чтобы расположить элемент в сетке, нужно задать ему координаты. Например, первый кот начинается на линии 1 столбца и линии 1 ряда, а заканчивается на линии 2 столбца и линии 2 ряда. Кот в очках начинается на 3 линии столбца и 1 линии строки, а заканчивается на 4 линии столбца и 2 линии строки.

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

Здесь кот в очках находится между линиями столбцов -1 и -2:

Стили для расположения элементов в сетке: grid-column и grid-row

grid-column-start и grid-column-end указывают, в каком столбце начинается элемент и в каком заканчивается. Например:

grid-row-srart и grid-row-end указывают, какие строки занимает элемент. Здесь всё, как со столбцами:

Для этих свойств есть сокращённые записи: grid-column и grid-row . В них можно сразу прописать, на какой линии начинается и заканчивается элемент — это делается через черту, вот так: grid-row: 1/3.

Свойство grid-area и repeat

Свойствоgrid-area

Писать каждый раз начальные и конечные координаты для столбцов и рядов — долго и не всегда удобно. Но можно сократить запись с помощью свойства grid-area , оно объединяет и заменяет grid-column и grid-row .

Свойство grid-area принимает четыре значения, которые разделяются косой чертой: grid-row-start , grid-column-start , grid-row-end и grid-column-end :

Эта же запись в полном варианте:

Ключевое словоrepeat

Второй способ сократить код — использовать ключевое слово repeat . Оно помогает, когда в grid-template-columns или grid-template-columns нужно создать множество одинаковых колонок или рядов:

С ключевым словом repeat код выглядит так:

В скобках после repeat сначала указывается количество строк или столбцов, а затем через запятую пишется их размер.

Границы и отступы

Границы между элементами задаются с помощью свойства gap . Например, gap: 10px добавит отступы между элементами по бокам и сбоку:

Чтобы задать только боковые отступы, используйте grid-column-gap , а для отступов между рядами — grid-row-gap .

Как изменить порядок элементов

Первый — указать расположение элемента с помощью grid-column , grid-row или grid-area . К примеру, у нас есть такой список:

 
Кот Кекс
 
Кот Барсик
 
Кошка Василиса
 
Кот Борис
 
 

На странице он выглядит так:

Поменяем порядок. Сделаем так, чтобы Кекс стал третьим и перешёл на вторую строку. Разметку не меняем, только стили:

С помощью стилей вы можете указать координаты для каждого элемента и даже наложить один элемент на другой, если это нужно.

Второй способ — использовать свойство order . По умолчанию элементы грида имеют order , равный 0 , но это значение можно менять. Например, вот что произойдёт, если мы добавим «Кексу» order: 1 :

Элемент переместится в конец:

Где отточить навык работы с гридами

«Старт в программировании» — курс для новичков. Он научит вас создавать страницы, в том числе строить сетки на флексах и гридах. Курс основан на тренажёрах и мастер-классах.

Grid Garden — интерактивная игра, которая поможет понять основы CSS Grid Layout. Вам предстоит поливать грядки с морковью и уничтожать сорняки с помощью гридов.

Раздело CSS Grid Layout — страница на официальной документации MDN. Поможет расширить знания о гридах и не только.

Grid by Example — на этом сайте вы найдёте множество примеров использования CSS Grid. Все статьи здесь на английском языке, но их можно перевести через переводчик, встроенный в браузер.

Материалы по теме

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Источник