Opret moderne layout nemt med Gridlex CSS Grid System
Frontend udvikling er forbedret radikalt med introduktionen af CSS flexbox. Dette gør det meget nemmere at oprett grids & kolonner der naturligvis skiftes for lydhørige layouter.
I stedet for at kode dit eget flexbox-net fra bunden er det langt lettere at bruge et værktøj som f.eks Gridlex. Dette gratis open source flexbox bibliotek er super-letvægt og meget let at tilpasse.
Alt du gør er Tilføj Gridlex stylesheet til din webside og arbejde med sine gitterklasser. Indvendige kolonner tager en klasse .col og du indpakker alle disse inde i a .gitter beholder. Dette definerer hver kolonne i samme bredde og skaber en ensartet grænseflade.
Denne standard kan tilsidesættes ved at tilføje dimensionering klasser til hver kolonne. På denne måde kan du have en kolonne med 70% bredde og en anden kolonne med 30% bredde (fx indhold / sidebar).
Du finder tonsvis af gitterprøver på Gridlex hjemmeside med levende demoer og kodeuddrag at kopiere / indsætte i dit websted. Det er et stort bibliotek med så mange valgfrie klasser for at hjælpe dig med at opbygge de enkleste net til enhver hjemmeside.
Alle net tilføjer op til en i alt 12 minikolonner, så du kan definere hvor meget plads hver kolonne skal tage op. Dette kan virke forvirrende, men det giver mening, når du ser de visuelle demoer.
Her er en kodeeksempel bruges til et større gitter med varierende bredder:
.........
Bemærk at .gitter klassen indeholder alt og kolonnerne forsøger at opdelt i 12 dele (i eksemplet ville dette være ⅓ bredde for hver). Men de faste kolonner span 2 og 6 cols henholdsvis den første kolonne bruger en automatisk bredde baseret på hvad der er tilbage.
Ved hjælp af de to andre kolonner kan vi udlede at der ville være 4 kolonner (12-6-2) tilbage til slå i alt 12. Det er meget simpelt matematik, men klassenavnene kan være forvirrende. Når du begynder at spille med Gridlex på et projekt, vil du hurtigt afhente navngivningssystemet.
Gridlex er i øjeblikket i version 2.x ogdet er konstant opdateres på GitHub. Som browser support vokser, ville jeg garantere mere opmærksomhed på flexbox, med flere websteder vedtager denne model til side grids.
Du kan endda finde en fuld galleri af websteder, der kører Gridlex, for at se, hvordan dette ser ud, når de anvendes til livewebsites.
Hvis du aldrig har brugt flexbox før, kan Gridlex være et sjovt bibliotek at lege med. Men jeg anbefaler også at praktisere først ved at bruge sjove flexbox-spil til at teste din viden og hjælpe dig med at forstå fundamentet.
Gridlex er tilgængelig gratis i GitHub repo eller du kan trække det via npm eller bower. Det tilbyder fuld dokumentation på hovedstedet, herunder demoer for kolonner med varierende bredde og medieforespørgsler.
Du har fuld kontrol over flexbox design og det kun tager et par CSS klasser at få det til at ske! Og hvis du nogensinde har et hurtigt spørgsmål eller vil dele et websted, du har bygget ved hjælp af Gridlex, kan du sende beskeder til Twitter @webdevlint.
