Grid.css - Un sistema a griglia minimale per gli sviluppatori Web

I framework di frontend più grandi come Bootstrap vengono con i loro proprie impostazioni di griglia. Ma anche loro vieni con un sacco di bagagli sotto forma di elementi di pagina pre-progettati e componenti JavaScript.

Se stai cercando un sistema di griglie molto più piccolo e snello allora ti piacerà Grid.css.

Questa libreria open source gratuita viene fornita con il tradizionale Sistema a 12 celle che puoi strutturare per qualsiasi layout. Il CSS è davvero facile da usare e il file stesso misura solo 560 byte (questo è mezzo KB!)

Iniziare è semplicissimo e ti serve solo un file CSS aggiunto alla tua intestazione.

Puoi trovare il collegamento per il download diretto nella homepage di Grid.css o nel repository ufficiale di GitHub. Potresti anche usare il versione CDN raw per incorporare questo file direttamente da GitHub senza ospitarlo da solo.

Ora puoi impostare la struttura della colonna usando qualsiasi elemento tu voglia (div, sezioni, ecc.).

Questo generalmente include a .riga elemento (il contenitore) insieme a molti elementi di colonna interni. Le classi di colonne usa i numeri per definire il loro spazio totale all'interno del contenitore, così per esempio, .col4 occupa quattro colonne del totale dodici.

Ecco un esempio di snippet dalla demo:

Puoi usare qualsiasi combinazione di classi di colonne che ti piacciono, purché aggiungere fino a 12.

Questo significa che puoi anche ristrutturare la pagina comunque tu voglia, usando diversi contenitori di fila. Ad esempio, potresti avere un'estensione di grandi dimensioni per l'intestazione, ma utilizzare due diverse impostazioni di riga / colonna per il corpo della pagina.

Naturalmente, questa libreria è 100% gratuito e open-source, quindi sei libero di apportare modifiche come preferisci.

Il creatore, Ahmed Tarek, fatto anche Butns che è una variante dei molti kit dell'interfaccia utente del pulsante. esso si abbina bene con Grid.css, quindi sono entrambe eccellenti librerie da raccogliere quando si inizia un nuovo progetto web.