Holy Grail CSS Grid Layout — Klar kode
Design CSS Grid-layouts visuelt: Indstil kolonner, rækker og mellemrum, og indtast derefter områdenavne i celler for at bygge grid-template-områder - med en live forhåndsvisning og kopierbar CSS og HTML.
Resultat
Denne side åbner gittergeneratoren, der er forudindlæst med den hellige gral-layout: tre kolonner og tre rækker, med sidehoved og sidefod, der spænder over hele bredden og en nav-/hoved-/tilsiderække imellem. Overskriftsrækken bruger automatisk højde, den midterste række udfylder den resterende plads, og de to sidesøjler er fastsat til 200px, mens hovedkolonnen tager resten.
Den hellige gral-layout fik sit navn, fordi det var virkelig svært at bygge pålideligt før CSS Grid - år med float-hacks, bordlayout og absolut positionering forsøgte at forfalske denne nøjagtige form. Med grid-template-områder kollapser det til fem navngivne regioner og en håndfuld sporstørrelser, hvorfor det fortsat er det første standardeksempel til undervisning i CSS Grid.
Hvert tal og mellemrum på denne side er stadig aktive: formindsk sidekolonnerne, tilføj en fjerde række, eller omdøb et område, og forhåndsvisningen og den kopierbare CSS opdateres med det samme. Kopier CSS- og HTML-blokkene direkte ind i dit projekt - alt kører lokalt i din browser, intet uploades.