CSS Grid-generator
Design CSS Grid-oppsett visuelt: angi kolonner, rader og mellomrom, og skriv områdenavn inn i cellene for å bygge grid-template-areas – med direkte forhåndsvisning og kopierbar CSS og HTML.
🔒 Behandles i sin helhet i nettleseren din – ingenting du skriver inn her blir noen gang lastet opp.
Resultat
En grid-template-areas-deklarasjon er et av de mest lesbare CSS-stykkene som finnes, men bare når den eksisterer først – å komme dit for hånd betyr å telle strenger med anførselstegn og matche radlengder, og én feilplassert celle ødelegger hele oppsettet lydløst. Denne generatoren gjør det om til direkte manipulering: angi kolonne- og radantall, skriv et navn inn i en celle i det levende rutenettet, så slås like navn automatisk sammen til én navngitt region.
Under panseret blir hver celle du lar stå tom, til en prikk i den genererte grid-template-areas-strengen, og hver celle du navngir, blir en del av det navnets rektangel. CSS tillater bare at en navngitt region opptar én ren rektangulær blokk, så verktøyet sjekker det mens du skriver og forteller deg nøyaktig når et navn ennå ikke danner et gyldig rektangel – i stedet for å produsere CSS som nettleseren vil avvise uten et pip.
Kolonnemellomrom og radmellomrom er som standard 8 piksler og kombineres til én enkelt gap-linje når de er like, og den direkte forhåndsvisningen speiler alltid dine grid-template-columns- og grid-template-rows-spor, inkludert faste pikselkolonner fra et forhåndsdefinert oppsett som holy grail sine 200 piksler sideskinner. De kopierbare utdataene dekker begge sider: en CSS-blokk klar for stilarket ditt og et matchende HTML-skjelett med én grid-area-div per navngitt region.
Grid og flexbox løser ulike layoutproblemer, og css-flexbox-generatoren på dette nettstedet er et bedre utgangspunkt for endimensjonale oppsett – en enkelt rad eller kolonne med fleksible elementer som en navigasjonslinje eller en stabel med kort. Bruk denne grid-generatoren i stedet når du trenger todimensjonal kontroll, eksplisitte rader og kolonner, eller navngitte regioner som topptekst/navigasjon/hovedinnhold/bunntekst; de to verktøyene havner ofte på samme side, grid for side-skallet og flexbox inni bitene. Som alle verktøy på dette nettstedet kjører det fullstendig i nettleseren din – ingen opplasting, ingen konto.