5 hienoa CSS Grid -generaattoria

Epäilemättä CSS Grid on uskomattoman tehokas ja jännittävä työkalu web-suunnittelijoille. Se on avannut kokonaisen määrän uusia mahdollisuuksia asettelun suhteen. Pään saaminen syntaksin ympärille voi kuitenkin olla haastavaa liioittelematta. Jos kamppailet, CSS Grid -generaattorit auttavat sinua. Niiden avulla voit rakentaa ruudukon ulkoasun visuaalisesti, ja he sylkevät oikean koodin (tai yksinkertaistaaksesi asioita edelleen, käytä yläosaa verkkosivujen rakentaja ).

Monet tällaiset työkalut ovat ilmestyneet ja ne ovat todella hyödyllisiä, varsinkin jos et ole syntaksin asiantuntija. Tässä tarkastelemme parhaita vaihtoehtoja. Haluatko oppia lisää? Katso meidän kattava opas CSS Gridiin , katso oppaamme sivujen ylläpito palveluita varmistaaksesi, että sinulla on oikea sivustosi kykyihin, ja jos sinulla on paljon mediatiedostoja, varmista, että varmuuskopioit ne pilvitallennus .



01. Asettelu! CSS Grid -generaattori

Asettelu! CSS Grid -generaattori



mihin Adobe indesign cs6: ta käytetään

Luettelomme käynnistäminen on tämä CSS Grid -generaattori Layoutitista! Tällä työkalulla valitset interaktiivisesti ruudukkoalueet, lisää sarakkeita ja rivejä painikkeilla, nimeä ruudukkoalueesi. Voit ladata koodin tai tallentaa mallin jaettavana pysyvänä linkkinä.

02. cssgr.id

cssgr.id



cssgr.id tarjoaa samanlaisia ​​ominaisuuksia kuin edellinen työkalu, mutta eri tyyppinen käyttöliittymä (kumpi haluat mieluummin tulla henkilökohtaisen makuun). Tämän työkalun kätevä ominaisuus on, että voit lisätä Lorem Ipsum -tekstiä. Se on lontoolaisen kehittäjän Dan Nethertonin työ.

03. CSS Grid Template Builder

CSS Grid Template Builder

iphone 11 pro max vs iphone 8 plus

Tämä luovien kehittäjien Anthony Dugois'n CodePen-demo on melko ainutlaatuinen vaihtoehto luettelossamme. Sen avulla voit rakentaa ruudukkoasettelun ensisijaisesti käyttämällä muokkaamaasi merkkijonoa ja pudottamalla sen sitten CSS: ään arvona ruudukko-malli-alueet omaisuus.



04. CSS Gridish

CSS Gridish

Tämä IBM-tiimin projekti ottaa suunnittelun tiedot tuotteen ruudukosta ja rakentaa useita resursseja tiimisi käytettäväksi. Nämä resurssit sisältävät luonnosdatan, jossa on piirtoalustat ja ruudukko / asetteluasetukset, CSS / SCSS-koodi, joka käyttää CSS Gridiä, CSS-flexbox-varalla, ja myös Chrome-laajennus.

05. CSS Grid Layout Generator

Tämä on suhteellisen uusi työkalu Dmitrii Bykovilta. Aloitat luomalla 'jäljet' (sarakkeet ja rivit), lisäät sitten kohteet ja vienyt sitten koodin. Se vie vähän totuttamista - yllä oleva yhden minuutin kuvaruutu on hyödyllinen alkuun pääsemiseksi.

Luo New York

miten tehdä kynä Android-puhelimille
Generate, palkittu verkkosuunnittelijoiden konferenssi, palaa NYC: hen 24.-25. Huhtikuuta! Napsauta kuvaa varataksesi lippuja

Tämä artikkeli julkaistiin alun perin netto , maailman myydyin verkkosivujen suunnittelijoille ja kehittäjille suunnattu lehti. Ostaa numero 316 tai tilaa .

Lue lisää: