Sukurkite modernius išdėstymus lengvai su „Gridlex CSS Grid“ sistema
Įdiegus „ CSS lankstinukas. Tai palengvina sukurti tinklus ir stulpelius kad natūraliai persijungia į reaguojančius maketus.
Vietoj kodavimo savo „flexbox“ tinklelį nuo nulio, daug lengviau naudoti tokį įrankį kaip „ Gridlex. Ši nemokama atviro kodo flexbox biblioteka labai lengvas ir labai lengva pritaikyti.
Viskas, ką darote, yra pridėkite „Gridlex“ stilių lentelę į savo tinklalapį ir dirbti su tinklelio klasėmis. Vidiniai stulpeliai yra klasė .col ir jūs visus tuos vyniojėte viduje .tinklelis konteinerį. Tai apibrėžia kiekvieną stulpelį tokio pat pločio ir sukuria vienodą sąsają.
Šis numatytasis galima pakeisti pridedant matavimo klasės į kiekvieną stulpelį. Tokiu būdu jūs galite turėti vieną stulpelį 70% pločio ir kitą stulpelį, kurio plotis yra 30% (pvz., Turinys / šoninė juosta).
Jūs rasite tonų tinklo pavyzdžių „Gridlex“ pagrindiniame puslapyje gyvi demo ir kodo fragmentai kopijuoti / įklijuoti į savo svetainę. Tai didžiulė biblioteka su tiek daug neprivalomos klasės padėti jums sukurti paprasčiausius tinklus bet kuriai svetainei.
Visi tinklai prideda iki a iš viso 12 mini stulpelių, todėl galite nustatyti, kiek vietos kiekvienam stulpeliui turėtų užimti. Tai gali atrodyti paini, bet tai yra prasminga, kai matote vaizdinius demonstracijas.
Štai a kodo pavyzdys naudojamas didesniam tinklui, kurio plotis yra skirtingas:
………
Atkreipkite dėmesį, kad .tinklelis klasėje yra viskas ir stulpeliai suskirstyti į 12 dalių (pavyzdyje tai būtų ⅓ plotis kiekvienam). Tačiau fiksuotos stulpeliai apima 2 ir 6 colius atitinkamai pirmajame stulpelyje naudoja automatinį plotį pagal tai, kas liko.
Naudodami kitus du stulpelius galime daryti išvadą, kad bus 4 stulpeliai (12-6-2) iš viso pasiekė 12. Tai viskas labai paprasta matematika, bet klasės pavadinimai gali būti painūs. Kai pradėsite žaisti su „Gridlex“ projekte, greitai pasieksite pavadinimo sistemą.
Šiuo metu „Gridlex“ yra 2.x versijoje ir tai nuolat atnaujinama apie GitHub. Kadangi naršyklės palaikymas didėja, norėčiau daugiau dėmesio skirti „flexbox“, o daugiau svetainių priima šį modelį puslapių tinklams.
Jūs netgi galite rasti pilna galerija svetainių, kuriose veikia „Gridlex“, kad pamatytumėte, kaip ši išvaizda taikoma gyvoms svetainėms.
Jei anksčiau niekada nenaudojote „flexbox“, „Gridlex“ gali būti įdomi biblioteka, su kuria norite žaisti. Bet aš taip pat rekomenduojame praktikuoti pirmą kartą naudodamiesi įdomiais „flexbox“ žaidimais, kad išbandytumėte savo žinias ir padėtų suprasti pagrindus.
Gridlex yra galima nemokamai „GitHub“ repo arba galite jį nuvesti per npm arba bower. Siūloma visą dokumentaciją pagrindinėje svetainėje, įskaitant įvairaus pločio stulpelius ir žiniasklaidos užklausas.
Tu turi visišką kontrolę per „flexbox“ dizainą ir tik trunka keletą CSS klasių kad tai įvyktų! Ir jei jūs kada nors turite greitą klausimą ar norite bendrinti svetainę, kurią sukūrėte naudodami „Gridlex“, galite pranešti kūrėjui „Twitter“ @webdevlint.
