Entonces, ¿qué está pasando con los sistemas de grillas? Quiero decir que Flexbox está aquí . Está listo, los navegadores están (más o menos) listos. Ya es hora. ¡Podemos centrar vertical y horizontalmente cualquier cosa sin hacks de transformación CSS!

Además, hay todas esas otras cosas que Flexbox puede hacer. Sin embargo, no nos engañemos a nosotros mismos. Hemos estado esperando eso centrado durante mucho tiempo.

Tal vez has estado viendo el brillante ¿Qué es el Flexbox? , series, y ya está listo para comenzar. Si no has visto eso, deberías.

Entonces ... ¿estamos abandonando los sistemas de grillas ahora? Bueno, de muchas maneras, podríamos. Especialmente si odias la sopa de clase tanto como yo. Sin embargo, los sistemas de grillas basados ​​en Flexbox ya son una cosa, y aún pueden ser útiles.

Por ejemplo, podrían ayudarte a apegarte a una metodología de CSS como CSS orientado a objetos o BEM . Tal vez solo te gusta usar las clases. O tal vez solo te estás acostumbrando a Flexbox, y tener la antigua grilla de doce columnas te ayudaría a adaptarte.

Tal vez sea más rápido usar un sistema predefinido que codificar de manera personalizada cada cuadrícula Flexbox que necesite.

Cualesquiera que sean las razones, los sistemas de grillas no van a desaparecer; y puedes tener lo mejor de ambos mundos. Entonces, ¿por qué no?

Los "dos grandes"

Sería negligente si no mencionara eso Foundaton 6 está fuera, y tiene una versión Flexbox de su grilla como una opción. Lo mismo ocurre con lo que aún no se ha lanzado Bootstrap 4 .

Están manteniendo las redes antiguas para las personas que necesitan admitir navegadores menos compatibles, pero están listos para hacer el cambio.

Rejilla Flexbox

Este sistema de grillas acertadamente nombrado mantiene en tus manos doce columnas. Tiene toda la familiaridad de 960.gs, toda la capacidad de diseño avanzado de Flexbox, más las clases listas para responder (extra pequeño, pequeño, mediano y grande) que esperábamos.

Resuelto por Flexbox

Resuelto por Flexbox fue hecho básicamente como una demostración. Aún así, es una demostración bastante completa y funcional que podría usarse como base para muchos proyectos.

Gridlex

Gridlex hace honor a su lema, "Solo un sistema de grilla Flexbox". No hay mucho para diferenciarlo de Flexbox Grid. Elija el que tenga mejores nombres de clase, supongo.

sGrid

sGrid es un poco diferente Específicamente, está construido con Stylus. ¿Yo se, verdad? Pensé que todos estábamos usando SASS ahora. De todos modos, también está diseñado para integrarse con otras tecnologías: Meteor, Grunt, React y NPM.

scss-flex-grid y sass-flex-mixin

Oh, ahí vamos. scss-flex-grid y sass-flex-mixin son dos cuadrículas Flexbox independientes basadas en SASS. Puede clonar desde su repositorio o instalar scss-flex-grid a través de NPM.

Conclusión

Las herramientas están ahí afuera. Hasta el momento, no he podido identificar un "favorito de los fanáticos". Lo más probable es que la gente simplemente use lo que viene con sus marcos de CSS favoritos, en su mayor parte.

En cualquier caso, ya no hay excusa para no quedar atrapado en Flexbox.