⭐ 0
🔍
Tekst Billede PDF & Docs Lyd Musik Elektronik Tid Hjælpeprogrammer Validatorer Esoterisk Spil

CSS Grid Generator

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.

Indtast et navn i en celle nedenfor; celler med samme navn flettes ind i en grid-template-areas region.

Behandler... 0%

Resultat

En gitter-skabelon-områder-deklaration er en af de mest læsbare dele af CSS, der findes, men kun når den eksisterer - at komme dertil i hånden betyder, at man tæller citerede strenge og matchende rækkelængder, og en uoverensstemmende celle bryder lydløst hele layoutet. Denne generator gør det til direkte manipulation: Indstil kolonne- og rækkeantal, skriv et navn i en hvilken som helst celle i det levende gitter, og matchende navne flettes automatisk ind i et navngivet område.

Under hætten bliver hver celle, du lader være tom, til en prik i den genererede gitter-skabelon-områder-streng, og hver celle, du navngiver, bliver en del af navnets rektangel. CSS tillader kun et navngivet område at optage en ren rektangulær blok, så værktøjet kontrollerer det, mens du skriver og fortæller dig præcis, hvornår et navn endnu ikke danner et gyldigt rektangel - i stedet for lydløst at producere CSS, vil browseren afvise.

Kolonne-gap og række-gap er som standard 8px og kombineres til en enkelt mellemrumslinje, når de matcher, og live-preview-gitteret afspejler altid dine gitter-skabelon-kolonner og gitter-skabelon-rækker spor, inklusive faste pixelkolonner fra en forudindstilling som den hellige grals sideskinner på 200px. Det kopierbare output dækker begge sider: en CSS-blok klar til dit stylesheet og et matchende HTML-skelet med en gitterområde-div pr. navngivet region.

Grid og flexbox løser forskellige layoutproblemer, og css-flexbox-generatoren på denne side er det bedre udgangspunkt for endimensionelle layouts - en enkelt række eller kolonne af fleksible elementer såsom en navbar eller en stak kort. Ræk i stedet efter denne gittergenerator, 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, gitter til sideskallen og flexbox inde i dens stykker. Som alle andre værktøjer på dette websted kører det udelukkende i din browser - ingen upload, ingen konto.

🛡️
Udføres i browser

Dine filer og input forlader aldrig denne enhed. Behandlingen kører helt offline. 100 % sikker.

Accepterede formater og regler

  • Nummerinput for 1-6 kolonner og rækker, plus separate kontrolelementer for kolonne-gab og række-gab, der kombineres til én mellemrumsværdi, når de matcher.
  • En navngivne områder-tilstand: skriv et områdenavn direkte ind i en hvilken som helst celle i det levende gitter; værktøjet bygger en gyldig gitter-skabelon-områder-streng og advarer, når navne ikke danner rene rektangler.
  • Kopierbar CSS-blok (visning: gitter, gitter-skabelon-kolonner/rækker, mellemrum, gitter-skabelon-områder) plus et matchende HTML-skelet med én gitterområde-div pr. navngivet region.

Vigtige fordele

✓ Indtast et navn direkte ind i en hvilken som helst celle, og matchende navne flettes ind i et gitter-skabelon-område-område - ingen træk-valg, ingen gætte citatstrengens syntaks i hånden.
✓ Live preview-gitteret ændrer størrelse og farves om ved hver ændring, så du kan se de nøjagtige kolonne- og rækkespor og hver navngivne region, før du kopierer en enkelt linje CSS.
✓ Forudindstillinger som det klassiske holy grail-layout og en smal sidebjælke giver dig en ægte, fungerende grid-skabelon-område-erklæring at starte fra i stedet for et tomt gitter.

Brug Cases

  • • Byg den klassiske hellige gral-sideskal — sidehoved og sidefod i fuld bredde med en nav/hoved/til side midterste række — ved at skrive områdenavne i stedet for håndskrevne gitter-skabelonområder.
  • • Lav en indstillingsside eller et administratordashboard med en sidebjælke med fast bredde ved siden af en fleksibel indholdskolonne, og kopier den nøjagtige CSS og HTML, når live-eksemplet ser rigtigt ud.
  • • Tjek, at et sæt af navngivne områder faktisk danner gyldige rektangler før afsendelse - værktøjet markerer de nøjagtige navne, der ville bryde gitter-skabelon-områder i browseren.