CSS-Gitter ignoriert 'Grid-Template-Säulen' Eigenschaft ⇐ CSS

[Anonymous]

Ich versuche, ein CSS-Gitter mit 3 Spalten der gleichen Breite und einer beliebigen Anzahl von Zeilen zu erstellen. Ich habe eine Reihe von Netzbereichen, die ich in bestimmten Bereichen oben im Netz anzeigen möchte, mit der Erwartung, dass alles andere nur die unteren Zeilen füllt. < /P>

Code: Select all

main {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-areas:
"b b b"
"a a d"
"a a e";
}
< /code>
Wie Sie sehen können, erwarte ich, dass die Grid-Area "B" die gesamte erste Reihe besetzt, und dann "A" Grid-Area "A" einen 2x2-Bereich darunter, mit den Bereichen "D" und "E" auf der rechten Seite. Dann sollten zusätzliche Kinder unten zusätzliche Zeilen erstellen, mit bis zu drei Spalten pro Zeile. />
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>
Ich habe festgestellt, dass ich das Raster mit dem Spaltenlayout, das ich möchte, ein zusätzliches Element in eine Position in der Raster-Template-Areas zum Rendern bringen kann, z.grid-template-areas:
"b b b"
"a a d"
"a a e"
". . c";
< /code>
Jetzt steckt das Raster alle verbleibenden Kinder in 3-Spalte-Zeilen richtig.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

Wie kann ich mein ursprüngliches Layout (ohne Child "C" in einen bestimmten Steckplatz) zu erhalten, um die konfigurierte Anzahl von Spalten zu respektieren?