Создание простой формы с помощью CSS Grid

Вы научились создавать простую форму с помощью Flexbox в предыдущая статья. Сегодня вы поймете, как создать то же самое с помощью CSS Grid.

Вот что мы строим:

Создание формы с помощью CSS Grid

Из рисунка выше мы знаем, что форма содержит два элемента:

1. Поле электронной почты
2. Кнопка отправки

Вот HTML:

<form>
  <input type="email" name="email"> 
  <button type="submit">Send</button>
</form>

Чтобы построить форму с помощью CSS Grid, вам нужно установить родительский display собственность на grid.

form {
  display: grid;
}

Вот что вы получаете:

Почему мы получили две строки?

Получаем две строки, потому что не указали количество столбцов для сетки. Браузеры всегда будут по умолчанию использовать один столбец.

Для этой формы нам нужно установить два столбца.

1. Первый столбец должен расширяться, чтобы заполнить все доступное пространство.
2. Размер второго столбца должен соответствовать его содержимому.

Для первого столбца мы можем использовать fr единица. Для второго столбца мы можем использовать auto.

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

На этом вы завершили макет формы. Вот Codepen для вас, чтобы играть:

См. перо Простая форма с CSS Grid Зелл Лью (@zellwk) на КодПен.

Когда элементы имеют разную высоту…

Мы будем моделировать элементы неравной высоты, заменяя buttonтекст с SVG. Это то же самое, что мы делали в предыдущей статье..

<form action="#"> <input type="email" placeholder="Enter your email"> <button type="button"><svg> <!-- a smiley icon --> </svg></button>
</form>

Добавление значка смайлика в качестве кнопки отправки

Обратите внимание на inputвысота увеличивается, чтобы соответствовать большому значку SVG! Опять же, нам не нужно писать дополнительный код. Это происходит потому, что элементы сетки растягиваются по вертикали, чтобы заполнить все доступное пространство.

Если вы хотите изменить это поведение, вы можете изменить align-items собственность либо start, endили center.

Элементы могут быть выровнены по-разному, если вы установите align-itemns к другому значению

Вот Codepen для вас, чтобы играть:

См. перо Простая форма с CSS Grid (с кнопкой SVG) Зелл Лью (@zellwk) на КодПен.

Подведение итогов

CSS Grid упрощает создание макетов. Его не обязательно использовать для макета макроса. Его также можно использовать для микромакетов, таких как пример формы, который вы видели здесь.

Получайте удовольствие от CSS Grid!

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