¿Alguna vez ha notado que cada vez que tiene dos opciones principales en un área en particular, las personas terminan con fuertes opiniones sobre cuál es la mejor?
Cuadrícula CSS vs. Flexbox! es solo uno de ellos, pero piensa en otros
ejemplos como Pepsi vs. Cola, PC vs. Mac, Burguer King vs. MacDonald’s.
Sorprendentemente (al menos para mí), ¡la gente se vuelve un poco tribal con esto! Algunas personas dicen que la cuadrícula CSS es lo mejor desde el pan rebanado. Otros piensan que flexbox se lleva la palma.
Pero la verdad, como siempre… está en algún punto intermedio. Siga leyendo para aprender todo lo que necesita saber sobre estas herramientas (¡y rompa algunos mitos en el camino!).
¿Cuáles son las diferencias entre flexbox y grid?
Las principales diferencias son las siguientes:
- Grid pone el diseño primero
- Flexbox pone el contenido primero
- Grid trata mejor con la superposición
- Grid se configura principalmente en el padre.
- Flexbox está configurado principalmente para los niños.
Pero entremos en más detalles ahora.
CSS Flexbox Vs Grid: ¿Flexbox es unidimensional?
Comencemos con algo que escuchará en todas partes: CSS flexbox le permite controlar el diseño en una dimensión, mientras que CSS Grid le permite controlar el diseño en dos dimensiones.
¿Es esto realmente cierto? Bueno, supongo que técnicamente lo es, ya que con flexbox tienes que elegir entre una fila o una columna con tu dirección flexible. Pero los elementos pueden ajustarse a nuevas filas/columnas:
A menos que su pantalla sea muy ancha o muy estrecha, verá una cuadrícula bidimensional allí. Sí, es una sola línea envuelta en varias filas (al igual que el párrafo que está leyendo ahora), pero sin duda parece bidimensional para cualquiera que lo mire.
Pero las cosas pueden ponerse complicadas con diseños más complejos. Digamos que desea tres columnas de cajas: una ancha en el medio y dos delgadas a cada lado.
Puedes hacerlo en un solo flexbox. Puede usar anchos porcentuales y tener clases separadas para los elementos anchos y delgados. Eso funciona bien en pantallas anchas:
Pero puede tener problemas si la pantalla no es tan ancha como esperaba:
Y aquí está el bolígrafo para eso:
Tenga en cuenta aquí, que CSS flexbox ha dado el contenido más importancia que la disposición. Nuestro diseño de tres columnas no se definió explícitamente en el código; surgió porque dimensionamos el contenido de tal manera que se creara. Por lo tanto, el navegador mantiene el tamaño de los elementos cuando se ajustan, con resultados no deseados.
Esto simplemente no es un problema con el que te encontrarías con la cuadrícula CSS. Establecería los límites de las columnas, establecería su espacio y listo:
display: grid;
grid-template-columns: 1fr 2fr 1fr;
gap: 20px;
grid-template-rows: auto;
Ese diseño, alineación y espaciado mantendrán su forma pase lo que pase. No habrá sorpresas inesperadas en el futuro porque el contenido se ajustará para adaptarse a las especificaciones de su cuadrícula.
Así que aquí está el distinción clave en el CSS Flexbox vs. Debate de cuadrícula:
Grid pone el diseño primero. Grid tomará su contenido y cambiará su forma para que se ajuste al diseño deseado.
Flexbox pone el contenido primero. Flexbox tomará su diseño y cambiará su forma para que se ajuste al tamaño deseado de su contenido.
A eso se refiere la gente cuando dice que flexbox es unidimensional. Puede alinear elementos a un nivel perfecto de píxeles a lo largo de una dimensión, pero tan pronto como se ajusta, las cosas pueden salir mal.
Pero… ¿No puedes usar más de un Flexbox?
¡Gran pregunta! Me alegro de que estés prestando atención.
Sí por supuesto que puedes.
Aquí simplemente usé varios flexboxes para imitar el diseño de cuadrícula de tres columnas.
Y esto es lo que me molesta un poco de que la gente insista en que Grid es mejor que Flexbox o viceversa. En la mayoría de los casos de uso, ambos funcionarán perfectamente bien.
Probemos con otro ejemplo.
CSS Grid Vs Flexbox: ¿Cuál es mejor para los diseños de página?
Otra cosa que escuchará todo el tiempo es que debe usar CSS Grid para áreas más grandes, como el diseño de una página completa, y CSS flexbox para áreas más pequeñas, por ejemplo, una barra de menú.
Aunque esa no es una regla general horrible, no es estrictamente cierta.
Puede usar la cuadrícula para controlar el diseño en elementos más pequeños como barras de menú. Es solo que con la cuadrícula, el diseño de los elementos tiene más importancia que el tamaño de los elementos en sí. Si desea bloquear la posición de los elementos de su menú en su lugar, la cuadrícula sería excelente para eso.
Y, por supuesto, puede diseñar diseños de página enormes y complejos con flexbox. Quiero decir, Oreja lo ha demostrado de manera bastante convincente.
Y, de hecho, hay razones por las que podría preferir usar la flexibilidad de flexbox para los diseños de página, en lugar de la rigurosidad casi militar de la cuadrícula. Por ejemplo, si parte de su contenido puede variar en tamaño de una página a otra, ¡CSS flexbox puede ser la mejor opción!
Sin embargo, es posible crear diseños más flexibles con cuadrícula, por lo que tampoco es una regla estricta, aunque probablemente sea justo decir que es un poco más difícil que con flexbox.
¿Qué pasa con la simplicidad y la elegancia?
Sin embargo, cuando se trata de diseños más grandes, podría argumentar que son más fáciles de crear en cuadrícula que en flexbox. A menudo se necesita menos código para hacer el mismo trabajo, y el código en sí es quizás más elegante (aunque eso es un poco subjetivo, lo sé).
Toma algo como esto:
Un diseño de cuadrícula CSS muy simple, con un encabezado, dos barras laterales en la sección de contenido y un pie de página.
Todo este diseño está gestionado por un contenedor, que he usado mis increíbles poderes creativos para llamar ‘contenedor’:
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: auto;
grid-template-areas:
"header header header header"
"left-sidebar content content right-sidebar"
"footer footer footer footer";
}La cuadrícula tiene cuatro columnas y usted ajusta sus anchos relativos con grid-template-columns.
Luego grid-template-areas te dice qué llena cada espacio en la cuadrícula.
Puedes apreciar la simplicidad allí, ¿verdad? Esto hace que sea increíblemente fácil administrar y controlar el diseño de la página y hace que todo se alinee perfectamente.
¡Pero espera, CSS Flexbox también puede hacer eso!
Sabía que ibas a decir eso.
Sí, tienes razón: el diseño anterior es trivial de reproducir usando CSS flexbox:
Solo usamos tres cajas flexibles: encabezado, contenedor y pie de página. Cada una es una fila separada en el diseño (por supuesto, también puede usar flex-direction: column; para controlar la posición de las columnas, por ejemplo, las dos barras laterales podrían ser columnas flexibles.
Y el resultado es el mismo.
No hay una buena razón para elegir uno sobre el otro en diseños simples como este: ambos hacen el trabajo igualmente bien.
A menudo preferimos aquello a lo que estamos acostumbrados
En mi humilde opinión, si las personas fueran realmente honestas, admitirían que solo usan la herramienta con la que están más familiarizados y cómodos.
Si ya sabe cómo hacer una página con CSS flexbox, es posible que no desee esforzarse en aprender CSS grid. Ya puede crear páginas bastante rápido, entonces, ¿por qué perder tiempo aprendiendo un nuevo enfoque cuando ya tiene un sistema que funciona?
Del mismo modo, si fuera diseñador gráfico antes de dedicarse al desarrollo, es posible que encuentre que la cuadrícula CSS es más intuitiva, ya que probablemente haya pasado mucho tiempo diseñando en torno a cuadrículas en herramientas como Illustrator. Tal vez entenderías mejor el ‘lenguaje’ de grid. ¿Por qué molestarse en aprender CSS flexbox, por qué no seguir aprovechando el conocimiento que ya tiene?
Yo diría que hay buenas razones para dar un paseo por el otro camino…
CSS Grid Vs CSS Flexbox: ¿Cuál debo usar entonces?
Como regla general, use la cuadrícula si el diseño es más importante que el contenido. Y use flexbox si el contenido es más importante que el diseño.
¿Desea crear un diseño basado en cuadrículas estrictamente alineado que permanezca igual independientemente del contenido que contengan sus elementos? ¿La alineación y el orden son importantes para su marca o para la apariencia que desea crear? Bueno, entonces, la cuadrícula CSS podría ser para ti.
¿Quieres más flexibilidad en tus diseños? ¿Desea poner más énfasis en su contenido y dar forma al diseño de su sitio a su alrededor? ¿O hay incógnitas en su contenido: cuánto tendrá, qué tamaño tendrán las imágenes, etc.? En ese caso, prueba flexbox.
Pero como he tratado de enfatizar, ninguna herramienta está rígidamente atrapada dentro de estas filosofías.
Los grandes desarrolladores son aquellos que aprenden a usar sus herramientas de maneras que no necesariamente esperarías.
Antes de que tuviéramos CSS flexbox, estábamos haciendo diseños con float (y qué dolor en el culo era eso). Antes de eso, eran tablas HTML. Antes de eso, la gente usaba gifs transparentes como espaciadores entre elementos (¡en serio!).
Al aprender diferentes enfoques y experimentar, las personas pudieron construir cosas que otros no pudieron.
Entonces, quizás una respuesta aún mejor a “¿Cuál debo usar?” es:
¡Cualquiera con el que estés menos familiarizado!
La práctica práctica es la única forma en que tendrá una idea de qué enfoque usar en qué situaciones. Así que si eres nuevo en Grid, úsalo en tu próximo proyecto. Si nunca ha hecho un diseño de página en flexbox, pruébelo.
El Mito de los Vs. Batalla
Recuerde también un hecho simple pero a menudo pasado por alto: no tienes que elegir una herramienta y quedarte con ella, ¡puedes usar ambas!
Esa es una de las ventajas de que CSS Flexbox vs. El debate de Grid tiene sobre las otras carreras de dos caballos que mencioné anteriormente, como Burger King vs. MacDonald’s. Quiero decir, difícilmente puedes poner un Big Mac en un Whopper, ¿verdad? (en realidad, espera… ¿puedes? Sostén mi cerveza…)
Entiendes mi punto, no tienes que elegir uno sobre el otro. Puedes usar ambos, juntos.
Vale, si me disculpan, tengo que comprar un par de hamburguesas.
Pero antes de irme, déjame decirte una última cosa. Hay otro enfoque que puede tomar para crear diseños de sitios web: ¡use una biblioteca y deje que haga todo el trabajo duro por usted!
Su navegador no soporta la etiqueta de vídeo.
Por ejemplo, fullPage.js es una biblioteca JS que le permite crear sitios web de desplazamiento de pantalla completa súper geniales. Puede configurar animaciones fluidas que mueven a las personas de una página a la siguiente, y se integra fácilmente con otros marcos y CMS, incluidos WordPress (Elementor o Gutenberg) y React.
Compañías como EA, Sony y la BBC lo usan, así que si quieres probarlo, puedes estar seguro de que estás obteniendo lo real aquí. Aquí hay algunos ejemplos de lo que fullPage.js puede hacer: ¡eche un vistazo, vea lo que piensa!
Artículos relacionados:
Sobre el Autor:
warren davies es un desarrollador front-end con sede en el Reino Unido.
Puedes encontrar más de él en https://warrendavies.net
