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

Вот рабочий пример из игры 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; 
*/
}


614e276c2355a922476167.png

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

Grid - как идет расчет линий/колонок?
  • Вопрос задан
  • 67 просмотров
Решения вопроса 1
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
Помните детские задачки про распил бревна? Сколько нужно распилов, чтобы получить столько-то кусочков.
Тут примерно тоже самое.

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

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

Нет, на 6 линии
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы