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

I framework di frontend più grandi come Bootstrap hanno le proprie impostazioni di griglia . Ma hanno anche 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 adorerai Grid.css .

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

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

Puoi trovare il link per il download diretto nella homepage di Grid.css o nel repository ufficiale di GitHub. Potresti anche utilizzare la versione CDN non elaborata per incorporare questo file direttamente da GitHub senza ospitarlo da solo.

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

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

Ecco uno snippet di esempio della demo:

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

Ciò significa che puoi anche ristrutturare la pagina come vuoi, usando diversi contenitori di righe . 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 è al 100% gratuita e open-source, quindi sei libero di apportare modifiche come più ti piace.

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