Раскладка карточки в двух видах (ленточный и плиточный)

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

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

Разберём вариант реализации.

Макет одной карточки

Мысленно разделим карточку на отдельные гридовые области:

Макет той же карточки с выведенными направляющими для построения грида

А вот какая будет структура у грида. Общий грид всей карточки будет состоять из четырёх рядов: первый — с фиксированной высотой (так как это изображение), а остальные ряды с автоматической высотой.

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

Схема гридов этой карточки, основного и вложенного

Разметка:

<article class="card"> <img class="card-image" src="picture.jpg" height="340" alt="Изображение товара"> <div class="card-info"> <h3>Черника свежая</h3> <p class="card-info-extra">Отличный товар по привлекательной цене!</p> </div> <dl class="card-stats"> <dt>Категория</dt> <dd>Ягоды</dd> <dt>Вес нетто</dt> <dd>1 кг</dd> <dt>Стоимость</dt> <dd>1000 ₽</dd> </dl> <div class="card-button"> <a class="button" href="#">В корзину</a> </div></article>

Сеточные стили для плиточной раскладки:

.card { display: grid; grid-template-rows: 340px repeat(3, auto); grid-gap: 10px; max-width: 350px;}.card-image { width: 350px; height: 340px;}.card-image { width: 100%; height: 100%; object-fit: cover;}.card-stats { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto 1fr; margin-left: 20px; margin-right: 20px;}.card-info { margin-left: 20px; margin-right: 20px;}.card-stats dt { grid-row: 1 / 2;}.card-stats dd { margin: 0;}.button { display: block; padding: 10px 20px; margin: 20px;}

Добавим для элемента <article class="card"> класс card-table.

<article class="card card-table"> …</article>

После добавления класса и изменения раскладки для него карточка должна выглядеть уже так:

Макет той же карточки в табличной раскладке Макет той же карточки с выведенными направляющими для построения грида

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

….card-table { grid-template-columns: 350px 1fr auto; grid-template-rows: repeat(2, auto); max-width: 900px;}.card-table.card-image { grid-column: 1 / 2; grid-row: 1 / 3; width: 350px; height: 250px;}.card-table.card-info { grid-column: 2 / 3; grid-row: 1 / 2;}.card-table.card-stats { grid-column: 2 / 3; grid-row: 2 / 3;}.card-table.card-button { grid-column: 3 / 4; grid-row: 1 / 3;}

Вот такая получилась структура грида:

Схема гридов этой карточки в табличной раскладке

Без внесения в разметку изменений (кроме добавления дополнительного класса самой карточке), только за счёт изменения структуры сетки мы получили новый вид карточки.

Раскладка формы

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

Макет поля для ввода электронного адреса Макет поля с выведенными направляющими для построения грида Схема грида для поля

Разметка:

<form class="form" action="#"> <input type="email" placeholder="Ваш email, например, [e-mail]"> <button type="submit"> … </button></form>

Стили:

.form { display: grid; grid-template-columns: 1 fr auto;

width: 500px;

box-sizing: border-box;

}

.form input {

/* стили поля ввода */

}

.form button {

/* стили кнопки */

}

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

Второй пример сетки для формы. На этот раз это форма-анкета для посетителя конференции. Макет более объёмной формы ниже:

Макет формы Макет формы с выведенными направляющими для построения грида

Область для заполнения данных можно разделить на шесть колонок и шесть строк. Первую и вторую колонку занимает область с фотографией участника. Поля Фамилия, О себе и подпись Ваша должность занимают по четыре колонки. Поля Instagram и Twitter — две колонки. Переключатели в поле Ваша должность — по одной колонке. Схематично макет формы можно представить в виде:

Схема грида для формы

Разметка формы:

<section class="profile"> <h2>Анкета посетителя конференции</h2> <form class="profile-form" action="#"> <div class="photo"> Тут будет фото </div> <div class="name"> <label for="name">Имя и фамилия</label> <input type="text" class="input" name="name" id="name"> </div> <div class="job"> <label for="job">Место работы</label> <input type="text" class="input" name="job" id="job"> </div> <div class="city"> <label for="city">Город</label> <input type="text" class="input" name="city" id="city"> </div> <div class="twitter"> <label for="twitter">Twitter</label> <input type="text" class="input" name="twitter" id="twitter"> </div> <div class="instagram"> <label for="instagram">Instagram</label> <input type="text" class="input" name="instagram" id="instagram"> </div> <div class="about"> <label for="about">О себе</label> <textarea> rows="4" class="input" name="about" id="about"></textarea> </div> <div class="post"> <labelВаша должность</label> </div> <div class="checkbox-1"> <label for="design">   <input id="design" name="post" type="checkbox" value="1" checked="checked">   Дизайнер </label> </div> <div class="checkbox-2"> <label for="front-end">   <input id="front-end" name="post" type="checkbox" value="2">   Разработчик </label> </div> <div class="checkbox-3"> <label for="manager">   <input id="manager" name="post" type="checkbox" value="3">   Менеджер </label> </div> <div class="checkbox-4"> <label for="other">   <input id="other" name="post" type="checkbox" value="4">   Другая </label> </div> </form></section>

Сеточные стили для формы: