Lag moderne layout enkelt med Gridlex CSS Grid System
Frontendutvikling har forbedret seg radikalt med introduksjonen av CSS flexbox. Dette gjør det mye lettere å opprett grids og kolonner som naturlig skifter for responsive layouter.
I stedet for å kode ditt eget flexboxruten fra grunnen, er det langt enklere å bruke et verktøy som Gridlex. Dette gratis open source flexbox biblioteket er superlett og veldig Lett å tilpasse.
Alt du gjør er legg til Gridlex stilark til din nettside og jobbe med sine ruteklasser. Innvendige kolonner tar en klasse .col og du pakker alle disse inn i a .Nett container. Dette definerer hver kolonne i samme bredde og skaper et jevnt grensesnitt.
Denne standarden kan overstyres ved å legge til størrelsesklasser til hver kolonne. På denne måten kan du ha en kolonne med 70% bredde og en annen kolonne med 30% bredde (for eksempel innhold / sidebar).
Du finner tonnevis av rutenettprøver på Gridlex hjemmeside med live demoer og kodebiter å kopiere / lime inn på nettstedet ditt. Det er et stort bibliotek med så mange valgfrie klasser for å hjelpe deg med å bygge de enkleste nettene for et hvilket som helst nettsted.
Alle rutenett legger opp til en totalt 12 minikolonner, slik at du kan definere hvor mye plass hver kolonne skal ta opp. Dette kan virke forvirrende, men det er fornuftig når du ser de visuelle demoene.
Her er en kodeeksempel brukes til et større grid med varierende bredder:
.........
Legg merke til at .Nett klassen inneholder alt og kolonnene prøver å delt inn i 12 deler (i eksemplet vil dette være ⅓ bredde for hver). Men de faste kolonnene span 2 og 6 cols henholdsvis, så den aller første kolonnen bruker en automatisk bredde basert på hva som er igjen.
Ved hjelp av de to andre kolonnene kan vi utlede at det ville være 4 kolonner (12-6-2) igjen til slå totalt 12. Det er alt veldig enkelt matte, men klassenavnene kan være forvirrende. Når du begynner å leke med Gridlex på et prosjekt, vil du hente navnesystemet raskt.
Gridlex er for tiden i versjon 2.x og dets stadig oppdateres på GitHub. Når nettleserstøtten vokser, vil jeg garantere mer oppmerksomhet til flexbox, med flere nettsteder som vedtar denne modellen for sidelinjer.
Du kan til og med finne en fullt galleri av nettsteder som kjører Gridlex, for å se hvordan dette ser ut når de brukes på levende nettsteder.
Hvis du aldri har brukt flexbox før, kan Gridlex være et morsomt bibliotek å leke med. Men jeg anbefaler også å trene først ved å bruke morsomme flexbox-spill for å teste din kunnskap og hjelpe deg å forstå grunnleggende.
Gridlex er tilgjengelig gratis i GitHub repo eller du kan trekke den via npm eller bower. Den tilbyr full dokumentasjon på hovedstedet, inkludert demoer for kolonner med varierende bredde og medieforespørsler.
Du har full kontroll over flexbox design og det bare tar noen CSS klasser for å få det til å skje! Og hvis du noen gang har et raskt spørsmål eller vil dele et nettsted du har bygget ved hjelp av Gridlex, kan du sende melderen til Twitter @webdevlint.
