Grid Layout funktioniert nicht?
<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.
1 Antwort
Von
Experte
Babelfish
bestätigt
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
Computer, Technik
#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";
}
Bei grid-area keine Anführungszeichen und grid-template-areas zeilenweise in einem String.
Woher ich das weiß:Studium / Ausbildung – Informatiker
iQa1x
03.08.2022, 01:56
@Saibotix07
dann liegt es an was anderem, bei jsfiddle tut es (siehe Link oben)
Geht auch nicht