Ingyenes eszköz
CSS Grid Area Debugger
Illeszd be a grid-template-areas értékét, és megmutatom, miért dobja el a böngésző az egész sablont — a hibás cellák pirossal kiemelve.
Miért omlik össze a grid
Egyetlen grid-elem mindig téglalap. Amikor névvel jelölsz ki területeket, mindegyik névnek tömör téglalapnak kell lennie — ha nem az, a böngésző az EGÉSZ grid-template-areas-t eldobja, az elemek automatikus elrendezésbe esnek, és a sarokba torlódnak.
1
Helyes — minden terület téglalap
A „nav” és a „main” is összefüggő téglalapot alkot, így a sablon érvényes.
grid-template-areas:
"head head"
"nav main"
"nav main";
2
Hibás — konkáv (L-alakú) terület
A „main” L-alakot rajzol, nem téglalapot — az egész tulajdonság érvénytelen.
grid-template-areas:
"head head"
"nav main"
"main main"; /* ✗ */
3
Hibás — kétfelé szakadt terület
Ugyanaz a név két különálló helyen szerepel — szintén érvénytelen.
grid-template-areas:
"side head side" /* ✗ */
"side main ....";