Как создать макет карточки с помощью CSS Grid Layout

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

CSS Grid Layouts меняет способ работы веб-дизайнеров, позволяя более эффективно размещать содержимое веб-сайта.

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

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

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

Инструменты компоновки сетки CSS

По ходу дела вам захочется осмотреть вещи на странице. В Firefox есть отличные инструменты разработчика для просмотра областей сетки. Используя инструменты разработчика Firefox, вы можете увидеть наложение, очерчивающее сетку. Firefox Developer Edition также имеет эту возможность.

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

Простые карточки с CSS Grid Layout

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

Карточки и общий макет страницы

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

Работа с установленным количеством карт

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

В этом примере (и других) все элементы .card находятся внутри элемента-контейнера .cards . Сделать это довольно просто.

 [css] .cards { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: auto; grid-gap: 1rem; }   .card { border: 2px solid #e7e7e7; border-radius: 4px; padding: .5rem; } [/css]

Важно отображать значение .cards в сетке. Без этого области сетки не могут быть созданы. Следующим шагом является определение grid-template-columns и выбор стиля. Фактический стиль карты будет объявлен с классом .card .

В этом примере вы увидите несколько тегов статьи с классом .card . Смотрите на Codepen.

Повторите для набора количества карт

Здесь карты начинают формироваться. Чтобы создать постоянное количество столбцов в строке, повторение используется с функцией repeat() . Эта функция принимает два аргумента: количество повторений и значение для повторения.

Например, grid-template-columns: repeat(3, 200px); вычисляет grid-template-columns: 200px 200px 200px; .

Дробная единица

Вы увидите, что в примере кода используется «fr». Что это такое? Эта единица измерения стала популярной благодаря CSS Grid. Fr означает «дробная единица», а 1fr занимает 1 часть доступного пространства. Это помогает упростить расчеты пространства.

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

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

Повторите для динамического количества карт

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

 [css] grid-template-columns: repeat(auto-fill, 250px); [/css]

Объявления ширины необходимы в дополнение к auto-fill . Имейте в виду, что со значением в px может быть пространство справа, когда карты недостаточно, но это не обязательно так, как вы увидите чуть позже.

Minmax для большего контроля над шириной карты

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

 [css] grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); [/css]

Столбцы всегда будут соответствовать сетке, а размер карточек будет не менее 200 пикселей. Когда минимальное пространство не полностью соответствует пространству, здесь вступает в игру максимальная ширина. Когда другая карточка шириной 200 пикселей не помещается, другие карточки будут больше 200 пикселей, поэтому они растягиваются, чтобы заполнить строку большим пространством, и она будет распределена поровну. [идентификатор статьи = ”21612″ align="правильно"]

Мобильный

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

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

 [css] grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); [/css]

Минимальная ширина карточки 300px. В строке появится столько карточек размером 300 пикселей, сколько может поместиться. Когда устройство очень маленькое, есть большая вероятность, что на нем не хватит места для двух карт подряд. Вот когда 1fr вступает в игру. Дробная единица отлично подходит для адаптивного дизайна. Когда две из 300-пиксельных карточек не помещаются, именно здесь становится очевидным мобильное представление. Когда в качестве максимальной ширины объявлена 1fr , одна карта будет занимать все доступное пространство, и они будут складываться друг над другом.

Разрыв сетки

Теперь, когда ширина карточек установлена, необходимо принять решение о наличии пространства между ними. Это свойство доступно в грид-контейнерах и упрощает создание желобов в дизайне. Grid-column-gap создает пространство между каждой карточкой. Когда вы видите grid-gap , это относится к сокращению для grid-row-gap и grid-column-gap . Grid-row-gap — это пространство сверху и снизу карточки, grid-column-gap — это пространство слева и справа от карточки.

Ресурсы по CSS Grid Layout

Когда дело доходит до CSS Grid Layouts, есть чему поучиться и есть много возможностей. Лучший способ узнать о CSS Grid Layout — дополнительно прочитать и поэкспериментировать. Существует много отличных ресурсов, но вот несколько для начала:

• Сетка на примере
• Курс CSS Grid Layout от Веса Боса
• Mozilla: введение в CSS Grid