Grid — как идет расчет линий/колонок?

Question

[Евгений Иванов]

Вот рабочий пример из игры grid garden

#garden {
  display: grid;
  grid-template-columns: 20% 20% 20% 20% 20%;
  grid-template-rows: 20% 20% 20% 20% 20%;
}

#water {
grid-area: 1 / 2 / 4 / 6;
/*
grid-row-start:1; 
grid-column-start:2;
grid-row-end:4; 
grid-column-end:6; 
*/
}

Вопрос в том - как идет расчет рядов или колонок.
А именно grid-column-start:2 - старт со 2 колонки. Верно, так и есть.
grid-column-end:6 - окончание с 6 колонки. Нет - окончание на 5 колонке.
Можно сказать, что не включительно. Но старт с 2 колонки включительно - вон она заполнена. А стоп с 6 колонки не включительно?
К тому же 6 колонки в сетке нет. Их всего 5.

Grid - как идет расчет линий/колонок?

Comments

[WapSter]

Не проще почитать статью, или в devtools посмотреть

[Сергей delphinpro]

Это не колонки, а линии
Теперь всё должно быть ясно =)

[Евгений Иванов]

Сергей delphinpro, WapSter, при заполнении таблиц используют колонки, а не линии.
В том же SQL мы не говорим с 1 линии по 6, мы говорим колонка, ряд.

Далее grid-column-end:6;
сетка-колонка-конец 6 Не я придумал такой синтаксис.
Вводит в заблуждение.

Ну и возможные варианты

grid-column-start:1;
grid-column-end:1;

Не дадут ничего. И по логике не будут ошибочными, т.к. линия 1 существует.
Нулевой нет, седьмой нет. Первая есть.

Когда если бы это были колонки, то это бы было с 1 по 1 включительно. Просто, понятно, логично.
А вот с 1 по 1 линию включительно - так не бывает.

Потому что мы размещаем содержимое не в линиях, а в колонках. И по логике должны работать с колонками, а не с линиями.

[Сергей delphinpro]

Евгений Иванов,
grid-column-end:6; – колонка кончается на 6 линии.
grid-column-start:1;grid-column-end:1; - начинается и кончается на первой линии. ну это логическая ошибка программиста.

Потому что мы размещаем содержимое не в линиях, а в колонках. И по логике должны работать с колонками, а не с линиями.

Мы размещаем ячейки между линиями.

Answer 1

[Ankhena]

Помните детские задачки про распил бревна? Сколько нужно распилов, чтобы получить столько-то кусочков.
Тут примерно тоже самое.

На картинке 5 "клеточек", а grid-линий 6.

grid-column-end:6 - окончание с 6 колонки. Нет - окончание на 5 колонке.

Нет, на 6 линии

Comments

[Евгений Иванов]

grid-column-end:6;
дословно
сетка-колонка-конец 6 Не линия. Не я придумал такой синтаксис.
Уже вводит в заблуждение. Почему не grid-line-start/end? Называйте линию...линией.
Но разработчики похоже другого мнения.

Интересно, а что будет заполнено если

grid-column-start:1;
grid-column-end:1;

Ничего? Логика упущена?
Когда с колонками было бы с 1 по 1 колонку включительно. Логично и понятно.

Я понимаю как работает этот код, но вот логики такого решения я понять не могу.

[Ankhena]

Евгений Иванов, потому что есть ещё span