CSS GRID игнорируя собственность «Сетка-колонны» ⇐ CSS

[Anonymous]

Я пытаюсь создать сетку CSS с 3 столбцами равной ширины и любым количеством рядов. У меня есть несколько областей сетки, которые я хочу отобразить в определенных областях в верхней части сетки, ожидая, что все остальное просто заполняет нижние ряды. < /P>

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

main {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-areas:
"b b b"
"a a d"
"a a e";
}
< /code>
Как вы можете видеть, я ожидаю, что «B»-«B», чтобы занять весь первый ряд, а затем «A», чтобы занять площадь 2x2 под ним, с областями «D» и «E» с правой стороны. Тогда любые дополнительные дети должны создавать дополнительные строки ниже, с до трех столбцов на строку. < /P>
На самом деле я вижу, что дополнительные дети разбивают себя на два дополнительных столбца - поэтому мой макет на самом деле становится макетом из 5 столбцов - и затем следуя ожидаемой строке />
main {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-areas:
"b b b"
"a a d"
"a a e";
}

.a {
grid-area: a;
background-color: cyan;
}

.b {
grid-area: b;
background-color: limegreen;
}

.c {
grid-area: c;
background-color: orange;
}

.d {
grid-area: d;
background-color: yellow;
}
.e {
grid-area: e;
background-color: magenta;
color: #fff;
}< /code>

A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
< /code>
< /div>
< /div>
< /p>
Я обнаружил, что я могу заставить сетку рендеринг, используя макет столбца, который я хочу, если я введу один дополнительный элемент в положение в сетке-template-areas, например: < /p>
grid-template-areas:
"b b b"
"a a d"
"a a e"
". . c";
< /code>
Теперь сетка должным образом пропустит всех оставшихся детей в 3-колодские ряды. < /p>


main {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-areas:
"b b b"
"a a d"
"a a e"
". . c";
}

.a {
grid-area: a;
background-color: cyan;
}

.b {
grid-area: b;
background-color: limegreen;
}

.c {
grid-area: c;
background-color: orange;
}

.d {
grid-area: d;
background-color: yellow;
}
.e {
grid-area: e;
background-color: magenta;
color: #fff;
}< /code>

A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P

Как я могу получить свой исходный макет (без принуждения ребенка «C» в определенное слот) для уважения настроенного числа столбцов?

Подробнее здесь: https://stackoverflow.com/questions/795 ... s-property