Gridlex CSS grid-süsteemiga saate hõlpsasti luua kaasaegseid paigutusi
Frontend arengu on radikaalselt paranenud CSS flexbox. See teeb selle palju lihtsamaks luua võrgud ja veerud et loomulikult nihkub tundlikule paigutusele.
Selle asemel, et kodeerida oma flexbox-võrku nullist, on palju lihtsam kasutada sellist tööriista nagu Gridlex. See tasuta avatud lähtekoodiga flexbox-raamatukogu on väga kerge ja väga lihtne kohandada.
Kõik, mida te teete, on lisage Gridlexi stiilileht oma veebilehele ja töötada oma võrguklassidega. Sisemised veerud võtavad klassi .col ja te kõik need kõik sisse .võrku konteiner. See määratleb iga veeru samas laiuses ja loob ühtse liidese.
See vaikimisi saab tühistada lisades suurusklassid igasse veergu. Nii saate ühe veeru 70% laiuses ja teise veeru 30% laiuses (nt sisu / külgriba).
Leiad tonni võrguproovid Gridlexi avalehel live demod ja koodilõigud kopeerida / kleepida saidile. See on suur raamatukogu, kus on nii palju valikulised klassid aidata teil luua veebisaidi jaoks lihtsaimaid võrke.
Kõik võrgud lisavad kuni a kokku 12 mini-veergu, nii saate määrata, kui palju ruumi iga veerg peaks võtma. See võib tunduda segane, kuid see on mõttekas, kui näete visuaalseid demosid.
Siin on a koodi näide kasutatakse suurema erineva laiusega võrguga:
………
Pange tähele, et .võrku klass sisaldab kõike ja veergu jagatud 12 osaks (näites oleks see iga laius for). Kuid fikseeritud veerud 2 ja 6 kolbi vastavalt esimesele veerule kasutab automaatset laiust mis iganes on jäänud.
Kahe teise veeru abil saame järeldada, et seal oleks 4 veergu (12-6-2) kokku 12. See on kõik väga lihtne matemaatika, kuid klassi nimed võivad olla segadust tekitavad. Kui olete Gridlexiga projektiga alustanud, saate kiiresti kiiresti nime.
Gridlex on praegu versioonis 2.x ja selle pidevalt uuendatakse GitHubis. Kui brauseri tugi kasvab, siis tagaksin ma suurema tähelepanu flexboxile, kusjuures rohkem saidid võtavad selle mudeli vastu lehekülgedele.
Võite isegi leida kogu galerii veebilehtedel, kus töötab Gridlex, et näha, kuidas seda näeb elavatel veebisaitidel.
Kui te pole kunagi flexboxi kasutanud, võib Gridlex olla lõbus raamatukogu, millega mängida. Aga soovitan ka harjutada kõigepealt lõbusaid flexbox-mänge, et testida oma teadmisi ja aidata teil mõista põhialuseid.
Gridlex on saadaval tasuta GitHub repos või saate seda npm või boweri kaudu tõmmata. See pakub täielik dokumentatsioon põhileheküljel, sealhulgas demodeid erineva laiusega veergude ja meedia päringute jaoks.
Sul on täielik kontroll üle fleksode disaini ja ainult selle võtab mõned CSS klassid et see juhtuks! Ja kui teil on kunagi kiire küsimus või soovite jagada veebisaiti, mille olete ehitanud Gridlexi abil, saate selle loojale Twitteris @webdevlint teatada.
