Дизайн формы с помощью Grid Layout

Я пытаюсь создать форму поиска в CSS, используя макет сетки. Моя цель состоит в том, чтобы форма выглядела примерно так:

это.

Мой подход состоял в том, чтобы иметь 4 строки:

  • 1 строка для ввода/текстовой метки
  • 1 строка для поля ввода/текста
  • 1 строка для флажка
  • 1 строка для кнопки поиска

и 10 дробных столбцов:

  • метка ввода/текста будет занимать 3 столбца
  • поле ввода/текста будет занимать 10 столбцов
  • флажок будет охватывать 2/3 столбца, а метка будет в той же строке, охватывающей 3/4 столбца
  • кнопка поиска будет располагаться по центру и охватывать 7 столбцов

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background-color: #fff;
}

form {
  margin: 10% 2%;
  border-radius: 10px;
  background-color: #f2f2f2;
  padding: 30px;
  display: grid;
  /*row for search field, row for checkbox, empty row, search button row
		  checkbox is 1 column, label is 4 columns, search button is 7 columns*/
  grid-template-rows: 60px 45px 45px 60px;
  grid-template-columns: repeat(10, 1fr);
}

label {
  grid-row: 1;
  grid-column: 1 / 11;
}

input[type=text] {
  grid-row: 2;
  grid-column: 2 / 11;
}
<!DOCTYPE html>
<html>

<head>
  <title>Test</title>
  <link rel="stylesheet" type="text/css" href="layout.css">
</head>

<body>
  <div class="form">
    <form action="{% url 'search_results' %}" method="post">
      <label for="search_field">Search for:</label>
      <!--<br>-->
      <input required id="search_field" type="text" name="search_term" placeholder="Search for...">
      <br>
      <input id="is_date" type="checkbox" name="is_date" value="date">
      <label for="is_date">I'm searching for a date (e.g. 02/10)</label>
      <br><br>
      <!--<input type="submit" value="Search">-->
      <button>Search</button>
    </form>
  </div>
</body>

</html>

Но каким-то образом я получаю вывод ниже.

Я подхожу к этому неправильно? Разве поле ввода/текста не должно быть во второй строке, а не в первой строке с меткой и т. д.?

этот вывод.


html css css-grid
person flwr_pwr    schedule 14.10.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Ваш CSS кажется неполным. К нескольким элементам не применяются стили. Непонятно, почему ваш макет не работает.

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

form {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: 60px 45px 45px 60px;
  grid-gap: 5px;
  padding: 30px;
  border: 2px solid green;
  border-radius: 10px;
  margin: 10px;
}

label[for="search_field"] {
  grid-row: 1;
  grid-column: 1 / 4;
}

input#search_field {
  grid-row: 2;
  grid-column: 1 / 11;
}

input#is_date {
  grid-row: 3;
  grid-column: 1 / 2;
}

label[for="is_date"] {
  grid-row: 3;
  grid-column: 2 / 5;
}

button {
  grid-row: 4;
  grid-column: 3 / 9;
  background-color: royalblue;
  border: none;
  color: white;
  font-weight: bold;
}

/* for demo styles only */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background-color: #fff;
}

form > * {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid green;
}

button {
  background-color: royalblue;
  border: none;
  color: white;
  font: 1.2em verdana;
}
<form method="post">
  <label for="search_field">Label</label>
  <input id="search_field" type="text" placeholder="Search for...">
  <input id="is_date" type="checkbox" value="date">
  <label for="is_date">Label for Checkbox</label>
  <button>Search</button>
</form>

демонстрация jsFiddle

person Michael Benjamin    schedule 14.10.2017