Quindi cosa succede con i sistemi di griglia? Voglio dire, Flexbox è qui . È pronto, i browser sono (più o meno) pronti. È quasi ora. Possiamo centrare verticalmente e orizzontalmente qualsiasi cosa senza l'ausilio della trasformazione CSS!
Inoltre, c'è tutta quella roba che Flexbox può fare. Non prendiamoci in giro, però. Abbiamo aspettato quella cosa di centraggio per molto tempo.
Forse hai guardato il geniale Che cos'è il Flexbox ?! , serie, e siete tutti pronti per partire. Se non l'hai visto, dovresti.
Quindi ... stiamo abbandonando i sistemi di griglia ora? Bene, in molti modi, potremmo. Soprattutto se odi la zuppa di classe tanto quanto me. Tuttavia, i sistemi di grid basati su Flexbox sono già una cosa e possono ancora essere utili.
Ad esempio, potrebbero aiutarti ad attenersi a una metodologia CSS come CSS orientato agli oggetti o BEM . Forse ti piace solo usare le lezioni. O forse ti stai solo abituando a Flexbox e avere la vecchia griglia a dodici colonne ti aiuterà ad adattarti.
Forse è solo più veloce usare un sistema predefinito piuttosto che codificare in modo personalizzato ogni griglia Flexbox di cui hai bisogno.
Qualunque sia la ragione, i sistemi di rete non stanno andando via; e puoi avere il meglio di entrambi i mondi. Allora perché non dovresti?
Sarei negligente se non lo menzionassi Foundaton 6 è fuori, e ha una versione Flexbox della sua griglia come opzione. Idem, l'ultimo nato Bootstrap 4 .
Stanno mantenendo le vecchie griglie in giro per le persone che hanno bisogno di supportare i browser meno compatibili, ma sono pronti a fare il passaggio.
Questo sistema di griglia con nome appropriato tiene a voi dodici colonne. Ha tutta la familiarità di 960.gs, tutte le funzionalità di layout avanzato di Flexbox, oltre alle classi responsive-ready (extra small, small, medium e large) che ci si aspetta.
Risolto da Flexbox è stato fondamentalmente realizzato come una demo. Eppure, è una demo piuttosto completa e funzionale che potrebbe essere utilizzata come base per molti progetti.
Gridlex è all'altezza del suo slogan "Just a Flexbox Grid System". Non c'è molto da differenziare da Flexbox Grid. Scegli quello con i nomi migliori delle classi, immagino.
sGrid è un po 'diverso. In particolare, è stato realizzato con Stylus. Infatti, NO? Pensavo che stavamo usando SASS adesso. In ogni caso, è anche progettato per essere integrato con una serie di altre tecnologie: Meteor, Grunt, React e NPM.
Oh, eccoci. SCSS-flex-grid e sass-flex-mixin sono due griglie Flexbox basate su SASS separate. È possibile clonare dal proprio repository o installare scss-flex-grid tramite NPM.
Gli strumenti sono là fuori. Finora, non sono stato in grado di identificare un "fan-preferito". È probabile che le persone useranno semplicemente ciò che viene fornito con i loro framework CSS preferiti, per la maggior parte.
In ogni caso, non ci sono più scuse per non rimanere bloccati in Flexbox.