Creați ușor facilități moderne cu sistemul Gridlex CSS Grid
Dezvoltarea frontierei sa îmbunătățit radical odată cu introducerea CSS flexbox. Acest lucru face mult mai ușor creați grile și coloane care trec în mod natural pentru aspecte receptive.
În loc să codiflați propriul dvs. grilă flexbox de la zero, este mult mai ușor să utilizați un instrument, cum ar fi Gridlex. Această librărie liberă open source flexbox este super-usoare si foarte ușor de personalizat.
Tot ce faci este adăugați foaia de stil Gridlex la pagina dvs. Web și lucrați cu clasele de rețea. Coloanele interne iau o clasă .col și le înfășurați înăuntru a .grilă container. Aceasta definește fiecare coloană la aceeași lățime și creează o interfață uniformă.
Această valoare implicită pot fi suprascrise prin adăugarea clase de dimensionare la fiecare coloană. În acest fel, puteți avea o coloană la o lățime de 70% și o altă coloană la o lățime de 30% (de ex., Conținutul / bara laterală).
Veți găsi multe grilă pe pagina principală Gridlex cu demonstrații live și fragmente de cod pentru a copia / lipi pe site-ul dvs. Este o imensă bibliotecă cu atât de multe clasele opționale pentru a vă ajuta să construiți cele mai simple rețele pentru orice site web.
Toate grilele ajung până la a total de 12 mini-coloane, astfel încât să puteți defini cât spațiu va ocupa fiecare coloană. Acest lucru poate părea confuz, dar are sens atunci când vedeți demo-urile vizuale.
Iată a exemplu de cod utilizat pentru o rețea mai mare cu diferite lățimi:
.........
Rețineți că .grilă clasa conține totul și coloanele încearcă să împărțit în 12 părți (în exemplul acesta ar fi ⅓ lățime pentru fiecare). Cu toate acestea, coloanele fixe span 2 și 6 cols respectiv, astfel încât prima coloană utilizează o lățime automată pe baza a ceea ce a mai rămas.
Folosind celelalte două coloane, putem deduce că vor exista 4 coloane (12-6-2) la stânga a lovit un total de 12. Este vorba de matematica foarte simplă, dar numele de clasă poate fi confuz. Odată ce începeți să jucați cu Gridlex pe un proiect, veți prelua rapid sistemul de numire.
Gridlex este în prezent în versiunea 2.x si este constant actualizată pe GitHub. Pe măsură ce crește sprijinul browserului, aș garanta mai multă atenție la flexbox, cu mai multe site-uri care adoptă acest model pentru grilele de pagini.
Puteți găsi chiar și o galerie completă de site-uri web care rulează Gridlex pentru a vedea cum arată acest lucru atunci când este aplicat site-urilor live.
Dacă nu ați mai utilizat niciodată flexbox înainte, atunci Gridlex poate fi o bibliotecă distractivă de jucat. Dar, de asemenea, vă recomandăm să practicați mai întâi jocurile funbox flexbox pentru a vă testa cunoștințele și pentru a vă ajuta să înțelegeți fundamentele.
Gridlex este disponibil gratuit în repo GitHub sau puteți să-l trageți prin npm sau bower. Ofera documentația completă pe site-ul principal, inclusiv demo-uri pentru coloane cu lățime variabilă și interogări media.
Tu ai control total peste designul flexbox și numai ia câteva clase CSS pentru a face să se întâmple! Și dacă ați avut vreodată o întrebare rapidă sau doriți să împărtășiți un site pe care l-ați construit folosind Gridlex, puteți trimite mesajul creatorului de pe Twitter @webdevlint.
