<div id="story">
<p id="grid1">1</p>
<p id="grid2">2</p>
<p id="grid3">3</p>
<p id="grid4">4</p>
<p id="grid5">5</p>
<p id="grid6">6</p>
</div>
#grid1{
grid-area: "eins";
border: 1px solid black;
}
#grid2{
grid-area: "zwei";
border: 1px solid black;
}
#grid3{
grid-area: "drei";
border: 1px solid black;
}
#grid4{
grid-area: "vier";
border: 1px solid black;
}
#grid5{
grid-area: "fünf";
border: 1px solid black;
}
#grid6{
grid-area: "sechs";
border: 1px solid black;
}
#story{
padding: 15px;
color: white;
background-color: rgb(0, 0, 255);
display: grid;
grid-template-columns: 200px 200px 200px;
grid-template-rows: 200px 200px 200px;
gap: 16px;
grid-template-areas:
"eins" "eins" "zwei"
"drei" "vier" "zwei"
"fünf" "vier" "sechs";
}
Es wird bei mir Quasi nur 1 2 3 nächste Zeile 4 5 6 angezeigt. Bild in der Ergänzung meiner letzten Frage. Ich will aber dass es so aussieht wie in grid template areas nur halt dass nicht zum Beispiel 1 1 dasteht sondern nur ein großes Feld mit der Zahl 1 drinnen.
