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

Holy Grail CSS Grid Layout — Ready Code

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

Den här sidan öppnar rutnätsgeneratorn förladdad med den heliga graallayouten: tre kolumner och tre rader, med sidhuvud och sidfot som spänner över hela bredden och en nav/huvud/aside-rad däremellan. Rubrikraden använder automatisk höjd, den mellersta raden fyller det återstående utrymmet och de två sidokolumnerna är fixerade till 200px medan huvudkolumnen tar resten.

Den heliga graallayouten fick sitt namn eftersom den verkligen var svår att bygga på ett tillförlitligt sätt innan CSS Grid – år av float-hacks, bordslayouter och absolut positionering försökte fejka denna exakta form. Med grid-template-areas kollapsar den till fem namngivna regioner och en handfull spårstorlekar, vilket är anledningen till att det förblir det första standardexemplet för undervisning i CSS Grid.

Varje siffra och lucka på den här sidan är fortfarande levande: förminska sidokolumnerna, lägg till en fjärde rad eller byt namn på ett område och förhandsgranskningen och den kopierbara CSS-uppdateringen omedelbart. Kopiera CSS- och HTML-blocken direkt in i ditt projekt – allt körs lokalt i din webbläsare, ingenting laddas upp.

🛡️
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.