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

Как создать макеты веб-форм с использованием 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 пикселей, в то время как правый столбец остается гибким. Вот результат, с некоторыми дополнительными стилями:

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Использование 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, мы хотим:

Добавить минимальную высоту для левого столбца.

Разместить рядом блоки contact и form.

Добавить clearfix или overflow: hidden; для сохранения высоты wrapper.

Разместить рядом элементы формы и добавить поля между ними.

Сбросить float для textarea и кнопки, а затем сделать так, чтобы они растягивались на всю ширину.

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

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Использование 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>

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

Добавляем position: relative; для элемента 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.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Курс по Flexbox

Изучите работу с Flexbox

Смотреть курс

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree