5 šaunūs CSS Grid generatoriai

Neabejotinai CSS tinklelis yra nepaprastai galingas ir įdomus įrankis interneto dizaineriams. Tai atvėrė daugybę naujų galimybių išdėstymo atžvilgiu. Vis dėlto galvojimas apie sintaksę gali būti sudėtingas, švelniai tariant. Jei jums sunku, CSS tinklelio generatoriai yra čia, kad padėtų. Su jais galite vizualiai sukurti tinklelio išdėstymą, ir jie išspjaus teisingą kodą (arba, kad dar labiau supaprastintumėte daiktus, naudokite viršutinę dalį svetainių kūrėjas ).

Tokių įrankių pasirodė daug ir jie tikrai yra naudingi, ypač jei nesate sintaksės žinovas. Čia mes pažvelgsime į geriausius variantus. Norite sužinoti daugiau? Patikrinkite mūsų išsamus CSS tinklelio vadovas , žr. mūsų vadovą interneto priegloba paslaugas, kad įsitikintumėte, jog turite tinkamą savo svetainės galimybėms, ir, jei turite daug daugialypės terpės failų, būtinai atsargines jų kopijas debesies saugykla .

01. Išdėstymas! CSS tinklelio generatorius

Išdėstymas! CSS tinklelio generatorius



kaip spalvinti mangą žymekliais

Iš mūsų sąrašo yra šis „CSS Grid“ generatorius iš „Layoutit“! Naudodamiesi šiuo įrankiu interaktyviai pasirenkate tinklelio sritis, mygtukais pridėkite stulpelių ir eilučių, pavadinkite tinklelio sritis. Galite atsisiųsti kodą arba išsaugoti dizainą kaip bendrinamą nuolatinę nuorodą.

02. cssgr.id

cssgr.id

„cssgr.id“ siūlo panašias funkcijas kaip ir ankstesnis įrankis, tačiau skiriasi sąsajos stilius (kuris jums labiau patinka, greičiausiai atitiks asmeninį skonį). Patogi šio įrankio funkcija yra ta, kad galite pridėti „Lorem Ipsum“ tekstą. Tai Londone įsikūrusio kūrėjo Dano Nethertono darbas.

03. CSS tinklelio šablonų kūrimo priemonė

CSS tinklelio šablonų kūrimo priemonė

Ši „CodePen“ demonstracija, kurią sukūrė kūrybinis kūrėjas Anthony Dugois, yra gana unikali galimybė mūsų sąraše. Tai leidžia jums sukurti tinklelio išdėstymą, pirmiausia naudojant eilutę, kurią redaguojate, ir tada įtraukite į savo CSS kaip tinklelio-šablono-sritys nuosavybė.

Noah Bradley nelanko meno mokyklos

04. CSS tinklelis

CSS tinklelis

Šis „IBM“ komandos projektas apima jūsų produkto tinklelio projektines specifikacijas ir sukuria kelis išteklius, kuriuos jūsų komanda gali naudoti. Šiuos išteklius sudaro eskizų failas su dailylentėmis ir tinklelio / išdėstymo nustatymais, CSS / SCSS kodas naudojant CSS tinklelį su CSS „flexbox“ atsargine kopija ir „Chrome“ plėtinys.

kaip valote akrilinių dažų teptukus

05. CSS tinklelio maketo generatorius

Tai yra gana nauja Dmitrijaus Bykovo priemonė. Pirmiausia sukurkite „takelius“ (stulpelius ir eilutes), tada pridėkite elementų, tada eksportuokite kodą. Tam reikia šiek tiek priprasti - aukščiau esanti vienos minutės ekrano kopija yra naudinga jums padėti.

Generuoti Niujorką

Balandžio 24-25 dienomis į NYC grįžta apdovanojimų pelniusi interneto dizainerių konferencija „Generate“! Norėdami rezervuoti bilietus, spustelėkite paveikslėlį

Šis straipsnis iš pradžių buvo paskelbtas neto , pasaulyje perkamiausias žurnalas, skirtas interneto dizaineriams ir kūrėjams. Pirk 316 leidimas arba Prenumeruoti .

Skaityti daugiau: