CSS Grid Generator
Vad är CSS Grid?
CSS Grid Layout är det mest kraftfulla layoutsystemet i CSS. Det är ett tvådimensionellt system som hanterar både kolumner och rader, till skillnad från flexbox som främst är endimensionellt.
Hur man använder denna CSS Grid Generator
Ange rutnätsdimensioner
Använd sidofältets kontroller för att definiera kolumner, rader och mellanrum.
Definiera rutnätsområden
Klicka och dra på förhandsgranskningen för att välja rektangulära områden.
Anpassa enheter
Justera kolumn- och radstorlekar med inmatningsfälten.
Prova en mall
Välj bland färdiga layouter som Holy Grail, Blog eller Dashboard.
Generera kod
Klicka "Generera kod" för att exportera färdig CSS och HTML.
Guide för CSS Grid-syntax
Grunden i CSS Grid innefattar egenskaper som grid-template-columns (för att definiera kolumnbredder), grid-template-rows (för att definiera radhöjder) och grid-gap (för att ställa in avstånd). Genom att använda bråkdelar (fr) kan man skapa flexibla layouter som anpassar sig efter skärmens storlek.
Exempel på CSS Grid-layouter
Vanliga exempel inkluderar 'Holy Grail'-layouten (sidhuvud, sidofält, huvudinnehåll, sidfooter) och layouten 'Main/Sidebar'. Med grid-template-areas kan du definiera dessa regioner med intuitiva namn, vilket gör din kod mycket renare och enklare att underhålla.