Как создать макеты веб-форм с использованием CSS Grid

От автора: эта статья является частью серии «CSS Grid Layout». В этом руководстве мы рассмотрим, как создать пару различных веб-форм с использованием CSS Grid. Для каждого примера мы сначала будем использовать float, а затем посмотрим, как можно создать тот же CSS макет с помощью Grid. Если у вас нет базовых знаний по CSS Grid, ознакомьтесь с предыдущими статьями этой серии. Давай приступим!

1. Простая форма регистрации

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

Использование «традиционного» CSS

При традиционном подходе мы можем использовать float, чтобы создать столбцы. Обратите внимание, что нам не обязательно нужен контейнер для элемента формы; мы можем напрямую создавать метки и поля ввода.

<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;
}

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:

form { display: grid;
}

Затем нам нужно разделить эту сетку с помощью grid-template-columns:

form { display: grid; grid-template-columns: 200px 1fr;
}

На основании вышеприведенного кода CSS первый столбец будет иметь фиксированную ширину в 200 пикселей, а второй займет 1fr («одну часть») оставшегося свободного пространства.

Теперь нам нужно определить место размещения меток и полей ввода. Для этого мы используем grid-column со специальными значениями для линий сетки:

На основе этих линий сетки мы применим следующие правила для наших меток, полей ввода и кнопки:

label { grid-column: 1 / 2;
} input,
button { grid-column: 2 / 3;
}

Метки будут размещаться в столбце, который начинается со строки 1 и заканчивается в строке 2. Поля ввода и кнопка будут размещаться в столбце, который начинается со строки 2 и заканчивается в строке 3. Наконец, мы используем grid-gap для добавления зазора в 16px между строками и столбцами:

form { display: grid; grid-template-columns: 200px 1fr; grid-gap: 16px;
}

2. Контактная форма

В этом макете мы хотим добиться следующего:

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

Использование «традиционного» CSS

В целом, используя floats, мы хотим:

Не так и много работы, не правда ли? Но лучше было бы решить это с помощью Flexbox или Grid. В этом конкретном случае я бы предпочел использовать Grid, поскольку мы упорядочиваем элементы как по горизонтали, так и по вертикали.

Использование CSS Grid Layout

Начнем с объявления сетки для wrapper и разделим его на два столбца.

.wrapper { display: grid; grid-template-columns: 1fr 2fr;
}

Элемент form также должен быть объявлен, как Grid:

form { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 20px;
}

После применения приведенных выше правил мы получим следующее:

Нам нужно, чтобы последние два элемента занимали всю ширину, для этого мы растянем их от линии сетки 1 до линии сетки 3.

.full-width { grid-column: 1 / 3; }

3. Форма профиля

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

Использование «традиционного» CSS

Мы используем следующую разметку:

<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>

Вкратце, мы можем создать такой макет с помощью следующих действий:

Использование CSS Grid Layout

Давайте не будем подробно рассматривать традиционный подход. С помощью Grid мы разделим форму на два столбца следующим образом:

Первый столбец будет в два раза шире второго столбца, для этого мы используем fr-единицы:

form { display: grid; grid-template-columns: 2fr 1fr; grid-gap: 20px;
}

Установив сетку, нам нужно разместить элемент form между линиями сетки 1 и 2:

form p { grid-column: 1 / 2;
}

Следующий шаг — поместить элемент загрузки файла во второй столбец. Для этого мы поместим его между линиями сетки 2 и 3. По вертикали он будет охватывать строки от линии сетки 1 до линии сетки 2.

.input-file-wrapper { grid-column: 2 / 3; grid-row: 1 / 2;
}

Заключение

Отличная работа! Мы рассмотрели несколько различных примеров использования CSS Grid при создании веб-форм. Как вы заметили, мы сэкономили много времени и усилий, использовав несколько строк кода, в отличие от традиционных методов компоновки. Вы можете использовать все вышеприведенные примеры, начиная с сегодняшнего дня, особая благодарность @supports CSS, которые помогали нам использовать определенные функции.

Автор: Ian Yates

Источник: https://webdesign.tutsplus.com/

Редакция: Команда webformyself.