Grid.css - Et minimalt gridsystem til webudviklere

Større frontenderammer som Bootstrap kommer med deres egne netopsætninger. Men også de kom med en masse bagage i form af prædesignede sideelementer og JavaScript-komponenter.

Hvis du leder efter et meget mindre og strømlinet net system, så vil du elske Grid.css.

Dette gratis open source bibliotek kommer pakket med den traditionelle 12-col grid system at du kan strukturere for ethvert layout. CSS'en er virkelig nem at bruge og selve filen måler kun 560 byte (det er en halv KB!)

Kom godt i gang er super let, og du behøver bare en CSS-fil tilføjet til dit overskrift.

Du kan finde direkte download link på Grid.css hjemmeside eller i den officielle GitHub repo. Du kan endda bruge rå CDN-version at integrere denne fil direkte fra GitHub uden at være vært for det selv.

Nu kan du oprette din kolonnestruktur ved hjælp af de ønskede elementer (divs, sektioner osv.).

Dette omfatter generelt a .række element (beholderen) sammen med mange interne kolonneelementer. Kolonne klasserne brug tal at definere deres samlede rum inde i beholderen, så for eksempel, .COL4 optager fire kolonner af de tolv samlede.

Her er en Eksempeluddrag fra demoen:

Du kan bruge en hvilken som helst kombination af kolonne klasser du kan lide, bare så længe de Tilføj op til 12.

Det betyder at du også kan omstrukturere siden men du vil, ved at bruge forskellige rækkebeholdere. For eksempel kan du have et stort spænd til dit overskrift, men brug to forskellige rækken / kol-opsætninger til din sideside.

Naturligvis er dette bibliotek 100% fri og open source, så du er fri til at foretage ændringer, men du kan lide.

Skaberen, Ahmed Tarek, også lavet butns som er en variant af de mange knap UI kits derude. Det par pænt med Grid.css, så de er begge gode biblioteker at afhente, når man starter et nyt webprojekt.