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

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

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

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

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

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

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

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

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

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

Вы обратили внимание, что мы используем calc(), что позволяет нам сделать левый столбец фиксированным с шириной 200 пикселей, в то время как правый столбец остается гибким. Вот результат, с некоторыми дополнительными стилями:

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

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

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

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

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

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

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

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

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

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

Мы хотим еще раз разделить форму (правую сторону) на два столбца, изменяя кнопку так, чтобы она растягивалась на всю ширину.

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

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

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

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

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

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

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

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

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

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

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

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

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

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

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

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

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

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

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

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

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

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

Добавляем position: relative; для элемента form.

Абсолютно позиционируем элемент загрузки файла в верхнем правом углу.

Добавляем для формы поля той же ширины, что и элемент загрузки файла.

Указываем фиксированную ширину для элемента загрузки файла.

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

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

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

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

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

Заключение

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

Автор: Ian Yates

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

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

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

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

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

Курс по Flexbox

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

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

Метки:

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

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree