Crea facilmente layout moderni con Gridlex CSS Grid System
Lo sviluppo del frontend è migliorato radicalmente con l'introduzione di Flexbox CSS. Questo lo rende molto più facile crea griglie e colonne questo naturalmente cambia per i layout reattivi.
Invece di codificare da zero la tua griglia della tua Flexbox, è molto più facile usare uno strumento come Gridlex. Questa è la libreria di floppybox open source gratuita super-leggero e molto facile da personalizzare.
Tutto ciò che fai è aggiungi il foglio di stile Gridlex alla tua pagina web e lavorare con le sue classi di griglia. Le colonne interne prendono una lezione .col e li avvolgi tutti dentro a .griglia contenitore. Questo definisce ogni colonna alla stessa larghezza e crea un'interfaccia uniforme.
Questo valore predefinito può essere ignorato aggiungendo classi di dimensionamento ad ogni colonna. In questo modo puoi avere una colonna con larghezza del 70% e un'altra colonna con larghezza del 30% (ad esempio contenuto / barra laterale).
Troverete un sacco di campioni di griglia sulla home page di Gridlex con demo live e frammenti di codice copiare / incollare nel tuo sito. È una biblioteca enorme con così tanti classi opzionali per aiutarti a costruire le griglie più semplici per qualsiasi sito web.
Tutte le griglie si sommano a totale di 12 mini colonne, così puoi definire quanto spazio occuperà ogni colonna. Questo può sembrare confuso ma ha senso quando vedi le demo visive.
Ecco un esempio di codice utilizzato per una griglia più grande con diverse larghezze:
.........
Si noti che il .griglia la classe contiene tutto e le colonne tentano di diviso in 12 parti (nell'esempio questo sarebbe ⅓ larghezza per ciascuno). Tuttavia, le colonne fisse intervallo 2 e 6 colonne rispettivamente, quindi la prima colonna usa una larghezza automatica basato su ciò che è rimasto.
Usando le altre due colonne, possiamo dedurre che sarebbero rimaste 4 colonne (12-6-2) colpire un totale di 12. È tutto molto semplice, ma i nomi delle classi possono essere confusi. Una volta che inizi a giocare con Gridlex su un progetto, raccoglierai rapidamente il sistema di denominazione.
Gridlex è attualmente nella versione 2.x. e la sua costantemente aggiornato su GitHub. Man mano che il supporto del browser cresce, garantirei maggiore attenzione a Flexbox, con più siti che adottano questo modello per le griglie di pagina.
Puoi anche trovare a galleria completa dei siti Web che eseguono Gridlex per vedere come questo appare quando viene applicato ai siti Web live.
Se non hai mai usato Flexbox prima, Gridlex può essere una libreria divertente con cui giocare. Ma consiglio anche di praticare prima utilizzando divertenti giochi Flexbox per mettere alla prova le tue conoscenze e aiutarti a capire i fondamenti.
Gridlex è disponibile gratuitamente nel repository GitHub o puoi farlo tramite npm o bower. Offre documentazione completa sul sito principale, inclusi demo per colonne di larghezza variabile e query multimediali.
Hai pieno controllo sopra il design della flexbox e solo prende alcune classi CSS per farlo accadere! E se hai una domanda veloce o vuoi condividere un sito che hai creato usando Gridlex puoi inviare messaggi al creatore su Twitter @webdevlint.
