5 seje CSS Grid-generatorer
Der er ingen tvivl om, at CSS Grid er et utroligt kraftfuldt og spændende værktøj til webdesignere. Det har åbnet en hel masse nye muligheder med hensyn til layout. At få hovedet omkring syntaksen kan dog være mildt sagt udfordrende. Hvis du kæmper, er CSS Grid-generatorer her for at hjælpe. Med dem kan du oprette et gitterlayout visuelt, og de spytter den korrekte kode ud (eller for at forenkle tingene yderligere skal du bruge en top webstedsbygger ).
Mange sådanne værktøjer er dukket op, og de er virkelig nyttige, især hvis du ikke er ekspert med syntaksen. Her ser vi på de bedste muligheder. Vil du lære mere? Tjek vores omfattende guide til CSS Grid , se vores guide til webhosting tjenester, for at sikre, at du har den rigtige til dit websteds muligheder, og hvis du har mange mediefiler, skal du sørge for at sikkerhedskopiere dem i Sky lagring .
01. Layout! CSS Grid generator
Denne CSS Grid-generator fra Layoutit starter vores liste. Med dette værktøj vælger du interaktivt dine gitterområder, bruger knapper til at tilføje kolonner og rækker, navngiver dine gitterområder. Den kan du downloade koden eller gemme designet som en delbar permalink.
02. cssgr.id
cssgr.id tilbyder lignende funktioner som det forrige værktøj, men en anden stil af interface (hvilken du foretrækker vil sandsynligvis komme ned til personlig smag). En praktisk funktion med dette værktøj er, at du kan tilføje Lorem Ipsum-tekst. Det er arbejdet fra London-baserede udvikler Dan Netherton.
03. CSS Grid Template Builder
Denne CodePen-demo af den kreative udvikler Anthony Dugois er en ganske unik mulighed på vores liste. Det giver dig mulighed for at opbygge gitterlayoutet primært ved hjælp af en streng, som du redigerer, og derefter falde ind i din CSS som en værdi for gitter-skabelon-områder ejendom.
04. CSS gitteret
Dette projekt fra IBM-teamet tager designspecifikationer af dit produkts net og bygger flere ressourcer, som dit team kan bruge. Disse ressourcer inkluderer en skitsefil med tegnebrætter og gitter- / layoutindstillinger, CSS / SCSS-kode ved hjælp af CSS Grid med et CSS-flexbox-fallback og også en Chrome-udvidelse.
05. CSS Grid Layout Generator
Dette er et relativt nyt værktøj fra Dmitrii Bykov. Du starter med at oprette 'spor' (kolonner og rækker), derefter tilføje elementer og derefter eksportere koden. Det tager lidt at vænne sig til - skærmbilledet på et minut ovenfor er nyttigt for at hjælpe dig i gang.
Denne artikel blev oprindeligt offentliggjort i net , verdens bedst sælgende magasin til webdesignere og udviklere. Købe udgave 316 eller abonnere .
Læs mere:
