CSS Grid Generator
Design CSS Grid-layouts visuelt: Angiv kolonner, rækker og mellemrum, og skriv derefter områdenavne i cellerne for at bygge grid-template-areas – med live forhåndsvisning og kopierbar CSS og HTML.
🔒 Behandles helt i din browser - intet, du indtaster her, bliver nogensinde uploadet.
Resultat
En grid-template-areas-deklaration er noget af det mest læsbare CSS, der findes, men kun når den først eksisterer – at nå dertil i hånden betyder at tælle strenge med anførselstegn og matche rækkelængder, og én forkert celle ødelægger lydløst hele layoutet. Denne generator forvandler det til direkte manipulation: Angiv antal kolonner og rækker, skriv et navn i en vilkårlig celle i det levende gitter, så smelter celler med samme navn automatisk sammen til ét navngivent område.
Under motorhjelmen bliver hver celle, du lader stå tom, til en prik i den genererede grid-template-areas-streng, og hver celle, du navngiver, bliver en del af dette navns rektangel. CSS tillader kun et navngivent område at optage én ren rektangulær blok, så værktøjet kontrollerer det, mens du skriver, og fortæller dig præcis, når et navn endnu ikke danner et gyldigt rektangel – i stedet for lydløst at producere CSS, som browseren vil afvise.
Kolonnemellemrum og rækkemellemrum er som standard 8px og slås sammen til en enkelt gap-linje, når de matcher, og gitteret i live forhåndsvisning spejler altid dine grid-template-columns- og grid-template-rows-spor, herunder faste pixelkolonner fra en forudindstilling som f.eks. holy grails sideskinner på 200px. Det kopierbare output dækker begge sider: en CSS-blok klar til dit stylesheet og et matchende HTML-skelet med én grid-area-div pr. navngivent område.
Grid og flexbox løser forskellige layoutproblemer, og css-flexbox-generatoren på dette websted er det bedre udgangspunkt til endimensionelle layouts – en enkelt række eller kolonne af fleksible elementer som en navigationslinje eller en stak kort. Brug i stedet denne grid-generator, når du har brug for todimensionel kontrol, eksplicitte rækker og kolonner eller navngivne områder som header/nav/main/footer; de to værktøjer ender ofte på samme side, grid til sidens skal og flexbox indeni dens dele. Som ethvert værktøj på dette websted kører det udelukkende i din browser – ingen upload, ingen konto.