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

↑

▷ Содержание

⇐ ПредыдущаяСтр 39 из 56Следующая ⇒

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

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

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

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

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

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

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

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

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

Разметка:

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

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

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

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

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

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

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

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

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

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

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

Разметка:

Стили:

width: 500px;

box-sizing: border-box;

}

.form input {

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

}

.form button {

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

}

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

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

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

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

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

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

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

Познавательные статьи:



Где возникла философия и почему?

Относительная высота сжатой зоны бетона

Сущность проекции Гаусса-Крюгера и использование ее в геодезии

Тарифы на перевозку пассажиров