CSS grid generator

CSS grid generator

Klistra in en ungefärlig skiss av en sidlayout och det här verktyget omvandlar det till fungerande CSS grid-kod. Skriv varje rad i layouten på sin egen rad, och upprepa samma ord över celler för att markera ett namngivet område — "header header" på en rad, "nav main" på nästa, "footer footer" på den sista beskriver en klassisk tre-raders layout med fullbreddshuvud och sidfot. Verktyget läser de upprepade namnen som grid-områden och genererar motsvarande grid-template-areas deklaration automatiskt.

Alternativen styr resten av den genererade CSS. Ställ in gapet mellan celler i pixlar, och ge eventuellt uttryckliga kolumnbredder eller radhöjder med valfria giltiga CSS-spårgrößen — fr-enheter, auto eller minmax(); lämna båda fälten tomma och verktyget fördelar spåren jämnt. Aktivera per-sektion-regler för att få en färdig grid-area deklaration för varje namngivet avsnitt, med hjälp av ett klassnamnsprefix som du väljer, så "header" blir direkt .grid-header. En responsiv växlare lägger till en max-width mediafråga som komprimerar hela layouten till en kolumn för smala skärmar, och en HTML-växlare lägger till ett motsvarande markeringsskelett så du kan se strukturen tillsammans med CSS.

Om två celler med samma namn inte bildar en solid rektangel — en L-form eller ett namn som hoppar över en cell — kan verklig CSS grid inte rendera det området korrekt, så verktyget flaggar det direkt i utmatningen som en varningskommentar istället för att tyst generera ogiltiga regler. Radslut från alla operativsystem hanteras på samma sätt, och den levande räknaren under utmatningen spårar hur många layoutrader, namngivna områden och tecken den genererade CSS innehåller.

Allt körs lokalt i din webbläsare; layouten du skissar och CSS du får tillbaka skickas aldrig någonstans. Kopiera resultatet, ladda ned det som en .txt fil, eller skicka utmatningen direkt till ett annat verktyg som CSS-formatereraren för att rensa indenteringen ytterligare.

FAQ