⭐ 0
🔍
Text Bild PDF och dokument Ljud Musik Elektronik Tid Verktyg Validatorer Esoterik Spel

CSS Grid Generator

Designa CSS-rutnätslayouter visuellt: ställ in kolumner, rader och mellanrum, skriv sedan områdesnamn i celler för att bygga rutnätsmallområden – med en liveförhandsvisning och kopierbar CSS och HTML.

Skriv ett namn i valfri cell nedan; celler med samma namn slås samman till ett område med rutnätsmallområden.

Bearbetar... 0%

Resultat

En deklaration av grid-template-areas är en av de mest läsbara bitarna av CSS som finns, men bara när den existerar — att komma dit för hand innebär att man räknar citerade strängar och matchande radlängder, och en felaktig cell bryter tyst hela layouten. Den här generatorn förvandlar det till direkt manipulation: ställ in kolumn- och radantal, skriv ett namn i valfri cell i det levande rutnätet och matchande namn slås automatiskt samman till en namngiven region.

Under huven blir varje cell du lämnar tom en prick i den genererade grid-template-areas-strängen, och varje cell du namnger blir en del av det namnets rektangel. CSS tillåter bara en namngiven region att ockupera ett rent rektangulärt block, så verktyget kontrollerar det när du skriver och berättar exakt när ett namn inte bildar en giltig rektangel ännu - istället för att tyst producera CSS kommer webbläsaren att avvisa.

Kolumn-gap och rad-gap är som standard 8px och kombineras till en enda mellanrumslinje när de matchar, och live-förhandsgranskningsrutnätet speglar alltid dina rutnät-mall-kolumner och rutnät-mall-rader, inklusive fasta pixelkolumner från en förinställning som den heliga gralens 200px sidoskenor. Den kopierbara utdatan täcker båda sidorna: ett CSS-block redo för din stilmall och ett matchande HTML-skelett med en rutnätsavdelning per namngiven region.

Grid och flexbox löser olika layoutproblem, och css-flexbox-generatorn på den här webbplatsen är den bättre utgångspunkten för endimensionella layouter - en enda rad eller kolumn med flexibla objekt som en navigeringsfält eller en bunt kort. Sök istället efter den här rutnätsgeneratorn när du behöver tvådimensionell kontroll, explicita rader och kolumner eller namngivna regioner som sidhuvud/nav/huvud/sidfot; de två verktygen hamnar ofta på samma sida, rutnät för sidskalet och flexbox inuti dess delar. Som alla verktyg på den här webbplatsen körs det helt i din webbläsare - ingen uppladdning, inget konto.

🛡️
Körs i webbläsare

Dina filer och indata lämnar aldrig den här enheten. Bearbetningen körs helt offline. 100 % säker.

Godkända format och regler

  • Antal inmatningar för 1–6 kolumner och rader, plus separata kolumn-gap och rad-gap-kontroller som kombineras till ett gap-värde när de matchar.
  • Ett namngivna områden-läge: skriv ett områdesnamn rakt in i valfri cell i det levande rutnätet; verktyget bygger en giltig grid-template-areas-sträng och varnar när namn inte bildar rena rektanglar.
  • Kopierbart CSS-block (visa: grid, grid-template-columns/rows, gap, grid-template-areas) plus ett matchande HTML-skelett med en grid-area div per namngiven region.

Viktiga fördelar

✓ Skriv ett namn rakt in i valfri cell och matchande namn slås samman till en rutnät-mall-område-region - inget drag-val, ingen gissning av citatsträngens syntax för hand.
✓ Liveförhandsvisningsrutnätet ändrar storlek och färgar om vid varje ändring, så att du ser exakt kolumn- och radspåren och varje namngiven region innan du kopierar en enda rad med CSS.
✓ Förinställningar som den klassiska heliga graallayouten och en smal sidofält ger dig en verklig, fungerande rutnät-mall-områden-deklaration att börja från istället för ett tomt rutnät.

Användningsfall

  • • Bygg det klassiska sidskalet för den heliga graalen – sidhuvud och sidfot i full bredd med en mittrad för nav/huvud/aside – genom att skriva områdesnamn istället för handskrivna rutnät-mallområden.
  • • Lägg upp en inställningssida eller administratörspanel med en sidofält med fast bredd bredvid en kolumn för flexibelt innehåll och kopiera exakt CSS och HTML när förhandsvisningen ser rätt ut.
  • • Kontrollera att en uppsättning namngivna områden faktiskt bildar giltiga rektanglar före leverans – verktyget flaggar de exakta namnen som skulle bryta rutnätsmallsområden i webbläsaren.