Grid.css - Et minimalt grid-system for webutviklere

Større frontendrammer som Bootstrap kommer med deres egne gridoppsett. Men også de kom med mye bagasje i form av forhåndsdefinerte sideelementer og JavaScript-komponenter.

Hvis du leter etter et mye mindre og strømlinjeformet rutenett, vil du elske Grid.css.

Dette gratis open source-biblioteket kommer med den tradisjonelle 12-kol grid system som du kan strukturere for hvilken som helst layout. CSS er veldig enkelt å bruke og selve filen måler bare 560 byte (det er en halv KB!)

Komme i gang er super lett og du trenger bare en CSS-fil lagt til overskriften din.

Du kan finne direkte nedlastingskobling på Grid.css hjemmeside eller i den offisielle GitHub repo. Du kan til og med bruke rå CDN-versjon å legge inn denne filen direkte fra GitHub uten å hoste det selv.

Nå kan du sette opp kolonnestrukturen din bruker noen elementer du vil ha (divs, seksjoner, etc).

Dette inkluderer vanligvis a .rad element (beholderen) sammen med mange indre kolonneelementer. Kolonneklassene bruk tall å definere deres totale plass inne i beholderen, for eksempel, .col4 tar opp fire kolonner av de tolv totalt.

Her er en eksempelbit fra demonstrasjonen:

Du kan bruke hvilken som helst kombinasjon av kolonneklasser du liker, bare så lenge de er legg til opptil 12.

Dette betyr at du også kan omstrukturere siden men du vil, ved å bruke forskjellige radbeholdere. For eksempel kan du ha en stor spenning for overskriften, men bruk to forskjellige rad / kol-oppsett for sidekroppen.

Naturligvis er dette biblioteket 100% gratis og åpen kilde, så du er fri til å gjøre endringer uansett.

Skaperen, Ahmed Tarek, laget også Butns som er en variant av de mange knappene UI-kits der ute. Den par fint med Grid.css, så de er begge gode biblioteker å plukke opp når man starter et nytt webprosjekt.