Почему Grid-Column добавляет дополнительный ряд? [дублировать] ⇐ CSS

[Anonymous]

Я пытаюсь понять, что происходит с собственностью Grid-Column в том, что должно быть единственной строкой. Я определил сетку с помощью одной строки с сетчатыми районами . Я позиционирую их, используя отдельные сетки-колонны < /code> свойства. < /P>

Код: Выделить всё

div#buttons {
display: grid;
grid-template-columns: auto auto auto auto;
grid-template-rows: auto;
button#one {
grid-column: 1/2;
}
button#two {
grid-column: 2/3;
}
button#three {
grid-column: 4/5;
}
button#four {
grid-column: 3/4;
/* grid-area: 1/3/2/4; */
}
}< /code>

One
Two
Three
Four

Когда я запускаю это, я обнаружил, что два последних элемента обращаются вспять, но последний пункт, теперь в 3-й позиции, упал на следующую строку. из.
Если я использую комментированное свойство с сети , которое заставляет элемент списка в первой и единственной строке, то оно работает так, как планировалось.>

Подробнее здесь: https://stackoverflow.com/questions/797 ... -extra-row