Cyber Monday Sale 40% off unlimited courses & creative assets! 40% off unlimited assets! Save Now
Advertisement
  1. Web Design
  2. CSS Grid Layout

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

by
Read Time:6 minsLanguages:

Russian (Pусский) translation by Ellen Nelson (you can also view the original English article)

В этом уроке мы рассмотрим как создавать несколько различных веб-форм, используя CSS сетку. Для каждого примера, сначала мы будем использовать плавающие элементы, а затем посмотрим, как сделать такой же макет используя CSS сетку.

Если у вас ни малейшего представления о CSS сетках, посмотрите нашу серию для начинающих Understanding the CSS Grid Layout Module (Понимание модуля компоновки CSS сетки). Приступим!

1. Базовая форма регистрации

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

С «обычным» CSS

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

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

А вот результат, с кое-какими стилями для наглядности:

Макет с CSS сеткой

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

На первом шаге, зададим нашу сетку на родительский элемент form:

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

В CSS коде выше, первый столбец будет иметь ширину 200px, а второй примет 1fr (одна "fraction" — часть/доля) от оставшегося свободного места.

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

Чтобы узнать больше о том как работают строки сетки, посмотрите эти короткие советы:

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

Метки окажутся в столбце, который начинается в строке 1 и заканчивается в строке 2. Поля и кнопка будут помещены в столбец, который начинается в строке 2 и заканчивается в строке 3.

Наконец, мы используем grid-gap для добавления интервала в 16px между строками и столбцами:

2. Форма контактов

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

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

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

«Обычный» CSS

Подведём итог, при использовании плавающих элементов нам понадобится:

  1. Добавить min-height к левому столбцу.
  2. Разместить «обёртки» контактов и формы.
  3. Добавить clearfix или overflow: hidden;, для сохранения высоты «обёртки». 
  4. Разместить элементы формы и добавить отступы между ними.
  5. Сбросить размещение textarea и кнопки отправки, а затем сделать так, чтобы она размещалась на всю ширину.

Это довольно много работы, верно?

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

С макетом CSS сетки

Давайте начнём с обозначения сетки на нашу «обёртку» и разделим её на два столбца.

Элемент формы также можно обозначить как сетку:

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

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

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

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

«Обычный» CSS

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

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

  1. Добавить position: relative; к элементу формы.
  2. Задать абсолютную позицию для поля загрузки файла направо и вверх.
  3. Добавить отступ для формы такой же ширины, как для поля загрузки файла.
  4. Задать фиксированную ширину для поля загрузки файла.

С макетом CSS сетки

Давайте не будем останавливаться на традиционном подходе слишком много. С сеткой, мы разделим форму на два столбца, вот так:

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

Задав сетку, нам нужно разместить элементы формы между строками сетки 1 и 2:

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

Заключение

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

У вас есть предложения по улучшению этих макетов? Сообщите мне об этом в комментариях ниже.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.