5

.myForm {
display: grid;
grid-template-columns: [labels] auto [controls] 1fr;
grid-auto-flow: row;
grid-gap: .8em;
background: beige;
padding: 1.2em;
}
.myForm > label {
grid-column: labels;
grid-row: auto;
}
.myForm > input,
.myForm > textarea {
grid-column: controls;
grid-row: auto;
}
.myForm > button {
grid-column: span 2;
}
<form class='myForm'>
<label for='customer_name'>Name </label>
<input type='text' name='customer_name' id='customer_name' required>
<label for='email_address'>Email </label>
<input type='email' name='email_address' id='email_address'>
<label for='comments'>Comments</label>
<textarea name='comments' id='comments' maxlength='500'></textarea>
<button>Submit</button>
</form>

4
  • Это означает сколько ячеек, которые охватываются. xsltdev.ru/css/grid-column
    – Denis640Kb
    15 янв 2020 в 22:27
  • @Denis640Kb вот тут xsltdev.ru/css/grid-guide/grid-6/#span указывается grid-row: 1 / span 2; что значит первая строка растянуть на 2 ячейки; в воем примере нету слеша это значит что в классе .myForm элемент button растянуть на 2 ячейки где бы он не находился ?
    – Leks
    15 янв 2020 в 22:48
  • Верно, Вы не задаёте начало ячейки, значит она будет растягиваться с начала элемента.
    – Denis640Kb
    15 янв 2020 в 23:13
  • @Denis640Kb это наглядно будет так grid-row: 1 / span 2; верно ? просто не понял что значит начала элемента (под элементом в нашем случае будет button ? )
    – Leks
    15 янв 2020 в 23:20

1 ответ 1

6

Параметр span указывает, сколько ячеек надо объединить.
В Вашем случае элемент растягивается на 2 ячейки столбцов.

Так как не указано начало отсчёта - счёт идёт от начала элемента button, а именно с первого столбца.

Выражение grid-column: span 2; эквивалентно grid-column: 1 / span 2;

Если вместо 1 вы укажете 2 (grid-column: 2 / span 2;), то элемент button будет растягиваться на 2 ячейки столбцов начиная со второго столбца.

Параметр grid-row объединяет ячейки не столбцов, а строк.
Например, имея несколько строк, используя grid-row: span 2; Вы можете объединить 2 строки в одну.

2
  • теперь все стало понятно благодарю
    – Leks
    15 янв 2020 в 23:51
  • 2
    мне кажется надо дополнить ответ при grid-row: span 2 ...
    – Leks
    15 янв 2020 в 23:53

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.