Holy Grail CSS Grid Layout — Ready Code
Tervezze meg a CSS-rács elrendezését vizuálisan: állítson be oszlopokat, sorokat és hézagokat, majd írja be a területneveket a cellákba, hogy rács-sablon-területeket építsen fel – élő előnézettel, másolható CSS- és HTML-kóddal.
Eredmény
Ez az oldal megnyitja a Szent Grál elrendezéssel előre betöltött rácsgenerátort: három oszlop és három sor, fejléc és lábléc a teljes szélességben, és egy navigációs/fő/melléksor közöttük. A fejlécsor automatikus magasságot használ, a középső sor kitölti a fennmaradó helyet, a két oldalsó oszlop pedig 200 képponton van rögzítve, míg a fő oszlop a többit.
A Szent Grál elrendezés azért kapta a nevét, mert valóban nehéz volt megbízhatóan megépíteni a CSS Grid előtt – az évekig tartó float hackelések, asztalelrendezések és abszolút pozicionálás próbálta meghamisítani ezt a pontos formát. A grid-template-területekkel öt megnevezett régióra és néhány sávméretre omlik össze, ezért továbbra is ez a szabványos első példa a CSS Grid tanítására.
Ezen az oldalon minden szám és hiányosság továbbra is él: szűkítse le az oldalsó oszlopokat, adjon hozzá egy negyedik sort, vagy nevezzen át egy területet, és azonnal az előnézetet és a másolható CSS-frissítést. Másolja be a CSS- és HTML-blokkokat közvetlenül a projektbe – minden helyileg fut a böngészőben, semmi sem kerül feltöltésre.