CSS Grid-generator
Skapa din CSS Grid-layout visuellt — ändra kolumner, rader och mellanrum, välj områden med klick och kopiera koden
Förhandsvisning av rutnät
Skapad CSS
.parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 10px;
}Så använder du CSS Grid-generatorn
CSS Grid är det kraftfullaste layoutsystemet i CSS. Skapa avancerade rutnätslayouter visuellt genom att ändra inställningar och klicka på celler för att ange områden. Kopiera sedan koden direkt till ditt projekt.
Ange kolumner och rader
Välj hur många kolumner och rader rutnätet behöver. Använd sifferfälten för att justera strukturen.
Ange storlekar och mellanrum
Definiera kolumnbredd och radhöjd med valfria CSS-enheter (fr, px, %, auto med mera). Ange avståndet mellan cellerna.
Klicka för att välja områden
Klicka på enskilda celler för att markera namngivna rutnätsområden. Varje vald cell blir ett eget område i den skapade CSS-koden.
Kopiera koden
Klicka på ”Kopiera kod” för att kopiera skapad CSS. Klistra in den i din stilmall och börja bygga layouten direkt.
Varför använda vår CSS Grid-generator
Slipp skriva rutnäts-CSS för hand. Designa visuellt, se layouten direkt och kopiera produktionsklar kod med ett klick.
Visuell klickbaserad design
Se rutnätslayouten medan du bygger. Klicka på celler för att ange namngivna områden — utan att föreställa dig grid-template-areas i huvudet.
Flexibelt enhetsstöd
Använd giltiga CSS-enheter som fr, px, %, em, rem, auto, minmax() och repeat(). Kombinera enheter för responsiva layouter.
Kod skapas direkt
Få produktionsklar CSS så snart designen är klar. Ingen manuell kodning eller syntaxfel — bara kopiera och klistra in.
Namnge rutnätsområden
Välj celler för namngivna områden. Generatorn skriver grid-template-areas åt dig och gör CSS-koden lättläst och enkel att underhålla.