Почему столбец не заставляет точное количество столбцов? ⇐ CSS

[Anonymous]

У меня есть следующий код: < /p>

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

.page-grid-layout {
display: grid;
column-count: 12;
column-gap: 32px;
row-gap: 32px;
margin: 0 80px;
}

.page-grid-layout .left {
grid-column: 1/7;
min-height: 150px;
}

.page-grid-layout .right {
grid-column: 8/12;
min-height: 150px;
}

.page-grid-layout .box {
min-height: 50px;
}

.visual-bounding-box {
border: 2px solid red;
}< /code>

Left
Right

Box
Box
Box
Box
Box
Box
Box
Box
Box
Box
Box
Box

Я ожидаю, что .left охватывает первое 7 столбцов и .right Последние пять. Но между ними есть разрыв, колонка и другой разрыв. Установка сетки Колона: 1/8 , кажется, исправляет это, но все же справа, тогда охватывает только 4 столбца вместо 5. Похоже, при ближайшем рассмотрении сделано только 11 столбцов. Далее это иллюстрируется .box divs, 12, что охватывает целую строку плюс , последний - на своей собственной строке.
ЧТО Я НЕ ГРКИСКА НА КСС ГРИД? Не должен ли я использовать его в сочетании с полями страницы? То, как он появляется в инспекторе, это очень сбивает с толку. Кажется, что желобы пронумерованы вместо фактических столбцов.


Подробнее здесь: https://stackoverflow.com/questions/794 ... of-columns