Holy Grail CSS Grid Layout — Klar kode
Design CSS-rutenettoppsett visuelt: angi kolonner, rader og gap, og skriv deretter områdenavn inn i celler for å bygge rutenett-mal-områder - med en direkte forhåndsvisning og kopierbar CSS og HTML.
Resultat
Denne siden åpner rutenettgeneratoren forhåndslastet med den hellige gral-oppsettet: tre kolonner og tre rader, med topp- og bunntekst som spenner over hele bredden og en nav/hoved/tilside-rad i mellom. Overskriftsraden bruker automatisk høyde, den midterste raden fyller den gjenværende plassen, og de to sidekolonnene er fastsatt til 200px mens hovedkolonnen tar resten.
Den hellige gral-oppsettet fikk navnet sitt fordi det var virkelig vanskelig å bygge pålitelig før CSS Grid – år med float-hacks, bordoppsett og absolutt posisjonering prøvde å forfalske denne eksakte formen. Med grid-mal-områder kollapser den til fem navngitte regioner og en håndfull sporstørrelser, og det er grunnen til at det fortsatt er det første standardeksemplet for undervisning i CSS Grid.
Hvert tall og gap på denne siden er fortsatt aktiv: krymp sidekolonnene, legg til en fjerde rad, eller gi nytt navn til et område og forhåndsvisningen og den kopierbare CSS-oppdateringen umiddelbart. Kopier CSS- og HTML-blokkene rett inn i prosjektet ditt - alt kjører lokalt i nettleseren din, ingenting lastes opp.