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

3 lika kolumner CSS Grid Layout

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 tre lika breda kolumner i en enda rad, med namngivna områden avstängda - layouten är bara repeat(3, 1fr), det kortaste sättet att säga "tre kolumner som alltid delar den tillgängliga bredden jämnt."

Kolumner med lika bredd är arbetshästen för kortrutnät, pristabeller och bildgallerier: inget område behöver namnges eftersom varje kolumn spelar samma roll, så vanlig spårstorlek är tydligare än en deklaration av rutnät-mallområden skulle vara. Lägg till en rad och samma tre spår upprepas under, fortfarande perfekt jämna.

Höj kolumnantalet för ett tätare rutnät, eller slå på namngivna områden om en senare kolumn behöver sticka ut från resten - CSS och HTML nedan uppdateras så fort du gör det. Allt körs på klientsidan, så det finns inget att ladda upp och inget att vänta på.

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