Вы научились создавать простую форму с помощью 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; 
}

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

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

Когда элементы неравной высоты

Мы будем имитировать элементы неравной высоты, заменив текст 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.

Вот код, с которым вы можете поиграть:

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

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

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

Удачи с CSS Grid!

Спасибо за прочтение. Эта статья вам чем-то помогла? Если да, то Я надеюсь, вы подумаете о том, чтобы поделиться им. Вы могли бы кому-то помочь. Спасибо!

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