Programmiererforum

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