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

Sidofält + innehåll CSS-rutnätslayout

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 med en layout med två kolumner, en rad redan namngiven: en 200px sidofältskolumn bredvid en flexibel innehållskolumn som tar upp det återstående utrymmet. Båda områdena är synliga i liveförhandsgranskningen omedelbart, färgade och märkta så att uppdelningen är uppenbar med ett ögonkast.

Detta är den vanligaste formen för navigering plus innehåll på webben – inställningssidor, dokumentationssidor och administratörspaneler lutar sig alla mot en skena med fast bredd bredvid ett flytande huvudområde. Eftersom sidofältskolumnen använder ett pixelvärde och innehållskolumnen använder 1fr, förblir sidofältet en konstant bredd medan innehållskolumnen absorberar varje extra pixel i visningsporten.

Byt namn på båda områdena, ändra kolumnbredden eller lägg till fler rader för en rubrik ovanför splittringen - CSS- och HTML-utdata nedan spårar varje redigering i realtid. Verktyget är gratis och fortsätter att fungera helt i din webbläsare, utan uppladdning och 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.