✌️ Qué sistema de columnas CSS uso en 2019

De toda la vida he usado las columnas de Bootstrap cuando necesitaba poner varios bloques en una misma fila. Para ser sinceros Bootstrap solo lo instalaba para crear las columnas. Ayá por la versión 3 de Bootstrap las columnas se creaban con floats.

Hace cosa de unos meses empecé a usar flexbox. Seguro que ya conoces flexbox porque ha estás alturas todo el mundo lo conoce, junto con css grid. Por si acaso no lo conoces, flexbox es un nuevo sistema en CSS para crear columnas. Básicamente a un contenedor le colocas display: flex y todos los elementos dentro de ese contenedor se colocarán en columnas. A estos elementos también le puedes especificar qué ancho van a tener cada uno por separado, su orden, dentro de la fila, etc.

Una cosa que me encantá de flexbox es la posibilidad de alinear sus elementos. Puedes decirle que alinee sus elementos y centrarlos en ambos ejes, a lo ancho y a lo alto. Además puedes decirle al contenedor que si se reduce el espacio para todas las columnas, que automáticamente mueva columnas a la siguiente fila, muy útil para temas responsive.

Hasta ahora lo que hacia era usar flexbox y especificar el ancho de cada columna según lo que estuviera haciendo. Además tenía que usar las media querys de CSS para poder ajustar el ancho dependiendo del tamaño de pantalla. Lo que se convierte en algo un poco tedioso.

Todo esto era para deciros que hace cosa de una semana he descubierto la solución perfecta para mí:

http://flexboxgrid.com/

Básicamente lo que hace es crear un sistema de columnas idéntico al de Bootstrap pero con flexbox, y además como solo tiene eso, solo ocupa 10Kb. Por ejemplo simplemente añadiendo la clase col-lg-6 col-xs-12 ya tengo una columna que ocupa la mitad de tamaño y el 100% en tamaño móvil.


📄   No te pierdas los últimos artículos del blog   📄