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

() translation by (you can also view the original English article)

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

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

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

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

С «обычным» CSS

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

<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 сеткой

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

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

1	form {
2	display: grid;
3	}

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

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

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

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

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

Советик: задайте название строкам CSS сетки, просто на всякий случай
В любой CSS сетке, у каждой строки есть порядковый номер, по которому мы можем ссылаться на место элемента в сетке. Однако, ещё мы можем дать название каждой из этих строк…

Ян Йетс
09 декабря 2016

CSS

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

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. Форма контактов

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

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

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

«Обычный» CSS

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

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

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

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

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

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

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

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

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

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

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

1	.full-width {
2	grid-column: 1 / 3;
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; к элементу формы.
Задать абсолютную позицию для поля загрузки файла направо и вверх.
Добавить отступ для формы такой же ширины, как для поля загрузки файла.
Задать фиксированную ширину для поля загрузки файла.

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

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

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

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

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

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

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

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

Заключение

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

Советик: Добавляем @supports CSS файл в демо на CodePen
Когда ваши демки на CodePen зависят от самых последних изменений в CSS, хорошей идеей будет предупредить людей. Предоставим уведомление, когда браузеры не поддерживают наши демки, используя ...

Ян Йетс
10 окт 2016

CodePen

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