От автора: эта статья является частью серии «CSS Grid Layout». В этом руководстве мы рассмотрим, как создать пару различных веб-форм с использованием CSS Grid. Для каждого примера мы сначала будем использовать float, а затем посмотрим, как можно создать тот же CSS макет с помощью Grid. Если у вас нет базовых знаний по CSS Grid, ознакомьтесь с предыдущими статьями этой серии. Давай приступим!
1. Простая форма регистрации
В этом макете мы разделим форму на два столбца, чтобы иметь возможность отображать метки слева, а поля ввода — справа.
Использование «традиционного» CSS
При традиционном подходе мы можем использовать float, чтобы создать столбцы. Обратите внимание, что нам не обязательно нужен контейнер для элемента формы; мы можем напрямую создавать метки и поля ввода.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<form> <label for="firstName" class="first-name">First Name</label> <input id="firstName" type="text"> <label for="lastName" class="last-name">Last Name</label> <input id="lastName" type="text"> <!-- more inputs --> </form> form { overflow: hidden; } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
label { float: left; width: 200px; padding-right: 24px; } input { float: left; width: calc(100% - 200px); } button { float: right; width: calc(100% - 200px); } |
Вы обратили внимание, что мы используем calc(), что позволяет нам сделать левый столбец фиксированным с шириной 200 пикселей, в то время как правый столбец остается гибким. Вот результат, с некоторыми дополнительными стилями:
Использование CSS Grid Layout
Наша цель состоит в том, чтобы определить два столбца, а затем поместить каждый элемент в соответствующий столбец.
Первый шаг — определить сетку для родительского элемента form:
|
1 2 3 |
form { display: grid; } |
Затем нам нужно разделить эту сетку с помощью grid-template-columns:
|
1 2 3 4 |
form { display: grid; grid-template-columns: 200px 1fr; } |
На основании вышеприведенного кода CSS первый столбец будет иметь фиксированную ширину в 200 пикселей, а второй займет 1fr («одну часть») оставшегося свободного пространства.
Теперь нам нужно определить место размещения меток и полей ввода. Для этого мы используем grid-column со специальными значениями для линий сетки:
На основе этих линий сетки мы применим следующие правила для наших меток, полей ввода и кнопки:
|
1 2 3 4 5 6 7 8 |
label { grid-column: 1 / 2; } input, button { grid-column: 2 / 3; } |
Метки будут размещаться в столбце, который начинается со строки 1 и заканчивается в строке 2. Поля ввода и кнопка будут размещаться в столбце, который начинается со строки 2 и заканчивается в строке 3. Наконец, мы используем grid-gap для добавления зазора в 16px между строками и столбцами:
|
1 2 3 4 5 |
form { display: grid; grid-template-columns: 200px 1fr; grid-gap: 16px; } |
2. Контактная форма
В этом макете мы хотим добиться следующего:
Высота столбцов должна быть одинаковой, поэтому боковая панель и контейнер формы должны иметь одинаковую высоту.
Мы хотим еще раз разделить форму (правую сторону) на два столбца, изменяя кнопку так, чтобы она растягивалась на всю ширину.
Построить этот макет можно с помощью floats. Однако нам нужно установить минимальную высоту для левого столбца, иначе он не будет растягиваться на полную высоту. Существуют и другие «традиционные» подходы к этой проблеме, но ни один из них не оптимален.
Использование «традиционного» CSS
В целом, используя floats, мы хотим:
Добавить минимальную высоту для левого столбца.
Разместить рядом блоки contact и form.
Добавить clearfix или overflow: hidden; для сохранения высоты wrapper.
Разместить рядом элементы формы и добавить поля между ними.
Сбросить float для textarea и кнопки, а затем сделать так, чтобы они растягивались на всю ширину.
Не так и много работы, не правда ли? Но лучше было бы решить это с помощью Flexbox или Grid. В этом конкретном случае я бы предпочел использовать Grid, поскольку мы упорядочиваем элементы как по горизонтали, так и по вертикали.
Использование CSS Grid Layout
Начнем с объявления сетки для wrapper и разделим его на два столбца.
|
1 2 3 4 |
.wrapper { display: grid; grid-template-columns: 1fr 2fr; } |
Элемент form также должен быть объявлен, как Grid:
|
1 2 3 4 5 |
form { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 20px; } |
После применения приведенных выше правил мы получим следующее:
Нам нужно, чтобы последние два элемента занимали всю ширину, для этого мы растянем их от линии сетки 1 до линии сетки 3.
|
1 2 3 |
.full-width { grid-column: 1 / 3; } |
3. Форма профиля
Пришло время создать последнюю форму. В этом примере у нас есть элемент ввода, с помощью которого пользователи могут загрузить фото профиля. Он должен быть помещен в верхнем правом углу.
Использование «традиционного» CSS
Мы используем следующую разметку:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<form action=""> <p> <label for="">Your name</label> <input type="text"> </p> <p> <label for="">Email</label> <input type="email"> </p> <p class="input-file-wrapper"> <label for="upload">Upload your photo</label> <input type="file" name="" id="upload"> </p> <p> <button>Save</button> </p> </form> |
Вкратце, мы можем создать такой макет с помощью следующих действий:
Добавляем position: relative; для элемента form.
Абсолютно позиционируем элемент загрузки файла в верхнем правом углу.
Добавляем для формы поля той же ширины, что и элемент загрузки файла.
Указываем фиксированную ширину для элемента загрузки файла.
Использование CSS Grid Layout
Давайте не будем подробно рассматривать традиционный подход. С помощью Grid мы разделим форму на два столбца следующим образом:
Первый столбец будет в два раза шире второго столбца, для этого мы используем fr-единицы:
|
1 2 3 4 5 |
form { display: grid; grid-template-columns: 2fr 1fr; grid-gap: 20px; } |
Установив сетку, нам нужно разместить элемент form между линиями сетки 1 и 2:
|
1 2 3 |
form p { grid-column: 1 / 2; } |
Следующий шаг — поместить элемент загрузки файла во второй столбец. Для этого мы поместим его между линиями сетки 2 и 3. По вертикали он будет охватывать строки от линии сетки 1 до линии сетки 2.
|
1 2 3 4 |
.input-file-wrapper { grid-column: 2 / 3; grid-row: 1 / 2; } |
Заключение
Отличная работа! Мы рассмотрели несколько различных примеров использования CSS Grid при создании веб-форм. Как вы заметили, мы сэкономили много времени и усилий, использовав несколько строк кода, в отличие от традиционных методов компоновки. Вы можете использовать все вышеприведенные примеры, начиная с сегодняшнего дня, особая благодарность @supports CSS, которые помогали нам использовать определенные функции.
Автор: Ian Yates
Источник: //webdesign.tutsplus.com/
Редакция: Команда webformyself.
