Luo moderneja asetuksia helposti Gridlex CSS Grid Systemin avulla
Frontendin kehitys on parantunut radikaalisti CSS flexbox. Tämä helpottaa luo verkkoja ja sarakkeita joka luonnollisesti siirtyy reagoiviin asetteluihin.
Oman flexbox-ruudukon koodittamisen sijaan on helpompi käyttää sellaista työkalua kuin Gridlex. Tämä ilmainen avoimen lähdekoodin flexbox-kirjasto on Kevyt ja erittäin helppo muokata.
Kaikki mitä teet lisää Gridlex-tyylitaulukko verkkosivullesi ja työskennellä sen ruudukon luokkien kanssa. Sisäiset sarakkeet vievät luokan .col ja kääri kaikki nämä sisälle .ruudukko astiaan. Tämä määrittää jokaisen sarakkeen samalla leveydellä ja luo yhtenäisen käyttöliittymän.
Tämä oletus voidaan ohittaa lisäämällä luokittelu luokat jokaiseen sarakkeeseen. Näin voit olla yksi sarake 70% leveydellä ja toinen sarake 30% leveydellä (esim. Sisältö / sivupalkki).
Löydät tonnia ruudun näytteet Gridlexin kotisivulla live-demot ja koodinpätkät kopioida / liittää sivustoosi. Se on valtava kirjasto, jossa on niin paljon valinnaiset luokat auttaa sinua rakentamaan yksinkertaisimmat verkot mihin tahansa verkkosivustoon.
Kaikki ruudukot lisäävät a yhteensä 12 minipylvästä, joten voit määrittää, kuinka paljon tilaa kukin sarake ottaa. Tämä saattaa tuntua hämmentävältä, mutta se on järkevää, kun näet visuaalisia demoja.
Tässä on a koodin esimerkki käytetään suurempaan verkkoon, jonka leveys vaihtelee:
.........
Huomaa, että .ruudukko luokka sisältää kaiken ja sarakkeet jaettu 12 osaan (esimerkissä tämä olisi ⅓ leveys kullekin). Kiinteät sarakkeet 2 ja 6 kolaria vastaavasti, joten ensimmäinen sarake käyttää automaattista leveyttä perustuu mitä tahansa jäljellä olevaan.
Kahden muun sarakkeen avulla voimme päätellä, että 4 saraketta (12-6-2) olisi jäljellä osuma yhteensä 12. Se on kaikki hyvin yksinkertaista matematiikkaa, mutta luokkien nimet voivat olla hämmentäviä. Kun aloitat Gridlexin pelaamisen projektissa, voit noutaa nimeämisjärjestelmän nopeasti.
Gridlex on tällä hetkellä versiossa 2.x ja se on päivitetään jatkuvasti GitHubissa. Koska selaintuet kasvavat, kiinnittäisin enemmän huomiota flexboxiin, ja sivustot hyväksyvät tämän mallin sivuverkkoihin.
Voit jopa löytää koko galleria verkkosivustoja, joissa on Gridlex, jotta näet, miten tämä näyttää, kun sitä käytetään live-sivustoihin.
Jos et ole koskaan käyttänyt flexboxia, Gridlex voi olla hauska kirjasto. Mutta suosittelen myös harjoitella ensin hauskoja flexbox-pelejä kokeilemaan tietosi ja auttamaan sinua ymmärtämään perusteet.
Gridlex on saatavilla ilmaiseksi GitHub-repossa tai voit vetää sen npm: n tai bowerin kautta. Se tarjoaa täydelliset asiakirjat pääsivustossa, mukaan lukien eri leveiden sarakkeiden ja mediakyselyjen demot.
Sinulla on täysi hallinta vain flexbox-suunnittelussa kestää muutaman CSS-luokan jotta se tapahtuisi! Ja jos sinulla on joskus nopea kysymys tai haluat jakaa sivuston, jonka olet rakentanut Gridlexin avulla, voit ilmoittaa luojalle Twitterissä @webdevlint.
