Cuadrícula o Flexbox?

Michelle Barker, autora del material que publicamos hoy, dice que una discusión reciente en Twitter iniciada por Chris Koyer la hizo pensar en cómo los desarrolladores web eligen entre las tecnologías CSS Grid Layout y CSS Flexbox Layout cuando diseñan diseños.



Chris Koyer en su tuit hizo una pregunta a la audiencia sobre cómo aquellos que saben lo que Grid y Flexbox prefieren explicar la diferencia entre estas tecnologías.

Entre las respuestas a esta pregunta, que, según Michelle, era bastante esperada, fue posible notar las valiosas ideas de Rachel Andrew y Jen Simmons.

Rachel dijo que la tecnología Flexbox está diseñada para desarrollar diseños unidimensionales que describen cómo se organizan los elementos en una fila o columna. Y la tecnología Grid está diseñada para desarrollar diseños bidimensionales que incluyen tanto filas como columnas.

Jen dice que la tecnología Grid se usa para describir diseños de filas y columnas. En este caso, el contenido se ubicará en las celdas del diseño exactamente como lo necesite el desarrollador. Cuando se usa Flexbox, esto no es así, y no se trata solo de colocar datos en la segunda dimensión (esto ya es comprensible), sino también de colocarlos en una dimensión. La tecnología Flexbox no es adecuada para la mayoría de los casos en los que se utiliza.

Michelle señala que solo leer tweets no revela las características del uso de las tecnologías Grid y Flexbox. En este artículo, quiere hablar sobre cuándo y dónde usar estas tecnologías, así como sobre por qué una tecnología puede preferirse a otra.

Al leer las respuestas a la pregunta de Chris, Michelle se sorprendió por la cantidad de personas que dijeron que usarían Grid solo para diseños de nivel de página y Flexbox para todo lo demás. Si también se adhiere a dicha regla, esto significa que se limita seriamente con respecto al uso de las poderosas capacidades de Grid en diversas situaciones. Lo principal que el autor del material le gustaría recomendar a los desarrolladores web es que cada diseño se debe percibir como algo especial, analizar las capacidades disponibles y no hacer suposiciones sobre qué tecnologías se necesitarán para crearlo. Aquí hay algunas preguntas que puede hacerse al elegir una tecnología adecuada para el desarrollo del diseño.

¿Cuántos cálculos tienes que hacer?

Aquí está mi respuesta a la pregunta de Chris. Dije entonces que si me parece que al crear el diseño hay que usar la función calc() CSS con demasiada frecuencia, esto generalmente significa que necesito la tecnología Grid, no Flexbox.

Si a menudo tiene que recurrir a la función calc() para calcular con precisión los tamaños de filas y columnas (si necesita tener en cuenta los campos internos, por ejemplo), esto a menudo indica que debe considerar usar la tecnología Grid, ya que el uso de unit medir fr simplificará enormemente tu vida. Aunque, como recomendación general, este consejo es bastante viable, no describe la imagen completa de lo que está sucediendo. A veces, Grid también puede ser necesario en aquellos casos en que la función calc() no se usa al construir el diseño. Por ejemplo, en una situación en la que estamos hablando de un diseño bidimensional con un ancho fijo, cuyos elementos tienen 200 píxeles de ancho. Cuando se desarrolla un diseño de este tipo, la función calc() no es necesaria para determinar el ancho de los elementos, pero al mismo tiempo, el comportamiento de los diseños construidos sobre la base de la cuadrícula puede ser extremadamente útil. Del mismo modo, son posibles situaciones en las que es mejor usar Flexbox e inevitablemente usar la función calc() . Como resultado, lo que estamos hablando aquí se percibe mejor como una regla rígida, como esta: “¿Usar calc() y Flexbox? Por lo tanto, debe cambiar a Grid ", pero como información para pensar.

¿Una o dos dimensiones?

Una gran diferencia entre las tecnologías Grid y Flexbox es que la primera le permite controlar la disposición de los elementos en dos dimensiones (en filas y columnas), y la segunda no lo permite. Nuevamente, esto no significa que nunca debas usar Grid para diseños unidimensionales. A menudo elijo la cuadrícula, en aquellos casos en los que necesito una alta precisión para controlar el tamaño y la posición de los elementos ubicados en una dimensión. Este enfoque se demuestra en este ejemplo en CodePen y en este artículo complementario.


Ejemplo de cuadrícula

¿Cómo deben comportarse los elementos?

La tecnología de cuadrícula a menudo tiene sentido para usar en casos donde el desarrollador necesita control sobre el comportamiento del diseño en dos dimensiones. Sin embargo, esto no significa que Grid sea siempre mejor que Flexbox. Al usar la cuadrícula, el desarrollador tiene a su disposición filas y columnas, celdas y las llamadas áreas de cuadrícula, que son una celda o un grupo de varias celdas. Cuando se usa una cuadrícula, los elementos deben ubicarse en estas celdas o áreas.

Supongamos que tenemos un diseño basado en la cuadrícula que difiere en las siguientes características: hay nueve elementos ubicados en tres filas de tres elementos de izquierda a derecha, hay 20 píxeles entre los elementos. Tal diseño se puede crear utilizando Grid y Flexbox. El código para describir este diseño basado en la cuadrícula es mucho más simple y limpio:

 .grid {   display: grid;   grid-template-columns: repeat(3, 1fr);   grid-auto-rows: 200px;   /*     ,   ,      .        , `auto`,  ,        . */   gap: 20px; } 

El uso de tal diseño conduce al hecho de que los elementos se colocan automáticamente, mientras que no necesitamos hacer nada más. Si nos damos tiempo para pensar, podemos usar las minmax() Grid auto-fit() y minmax() , lo que nos permitirá obtener un diseño totalmente receptivo sin usar consultas de medios. Abra este ejemplo, intente cambiar el tamaño de la ventana y observe lo que sucede.


Ejemplo de cuadrícula

Puedes ver más sobre esta técnica, así como sobre otras cosas útiles, viendo este video.

Si creamos un diseño similar usando Flexbox, entonces, a diferencia del ejemplo que acabamos de describir, necesitaríamos estilizar tanto los elementos como el contenedor:

 .grid {   display: flex;   flex-wrap: wrap;   margin: -10px;   width: calc(100% + 20px); } .item {   width: calc((100% / 3) - 20px);   flex: 0 0 auto;   margin: 0 10px 20px 10px; } 

Aquí, en el contenedor, deberá especificar un valor negativo para la propiedad de margin , a fin de neutralizar el hecho de que el ancho total de los elementos es mayor que el contenedor en sí, y así transferir datos a la siguiente línea. Además, este ejemplo no puede demostrar el mismo comportamiento receptivo sin un esfuerzo adicional de nuestra parte. Además, debe tenerse en cuenta que el uso de consultas de medios probablemente sea necesario aquí.

Aquí hay un ejemplo en CodePen que ilustra lo anterior.


Ejemplo de Flexbox

Hay varias formas de crear el mismo diseño con Flexbox, pero todas requieren el uso de algunos "hacks", y esto sucede por la razón de que es su naturaleza. De hecho, estamos hablando del hecho de que estamos tratando de usar la tecnología Flexbox para lo que realmente no está destinada. Pero esto no significa que Flexbox sea siempre una elección infructuosa de la base del diseño.

Muchos marcos CSS modernos utilizan alguna variación de este método para representar diseños. Y, por cierto, si quieres seguir este camino, puedo recomendarte a Susy , un conjunto de herramientas que asume todas las dificultades para crear estos diseños.

Entonces, ¿qué es mejor elegir en esta situación? Cuadrícula o Flexbox? Parece que Grid tiene algunas ventajas innegables aquí, pero para responder a esta pregunta, debemos pensar en lo que debería suceder si tenemos más de nueve, pero menos de 12 elementos (si hay alguno por ejemplo, 12, entonces esto les permitirá completar completamente una nueva línea). ¿Necesitamos que los nuevos elementos estén simplemente al comienzo de la siguiente línea, como fue el caso en los ejemplos que vimos? ¿O necesitamos que se comporten de manera diferente? Quizás si solo hay un elemento en la siguiente fila, ¿entonces necesitamos que ocupe todo el espacio de esta fila, como en la opción A del siguiente ejemplo? ¿O tal vez si solo hay dos elementos en la nueva línea, necesitamos que estén centrados, como en el Ejemplo B?


Diferentes opciones para colocar artículos en la última línea.

Cuando se utiliza un diseño basado en cuadrícula con colocación automática de elementos, solo tenemos una opción: colocar un nuevo elemento en una celda accesible ubicada a la izquierda. Una disposición similar de elementos se puede encontrar en ejemplos anteriores. Aquí procedemos del supuesto de que la propiedad de dirección no está establecida en rtl (en este caso, los elementos se ubicarían de derecha a izquierda y el único elemento en la última fila se ubicaría en la celda derecha). Como resultado, los elementos nuevos al usar la cuadrícula se colocan en las siguientes celdas de cuadrícula disponibles. La tecnología Flexbox le permite controlar de manera flexible el diseño de los elementos. Esto significa que podemos controlar el comportamiento de los elementos mediante una combinación de propiedades que controlan la ubicación de los elementos y su alineación.

Aquí hay un ejemplo que demuestra tales diseños, cuando se utiliza cuál o dos elementos por línea, calculados en tres elementos, ocupan toda esta línea.


El artículo ocupa todo el espacio de fila disponible.

Como resultado, resulta que independientemente de la tecnología utilizada para crear el diseño, todo se reduce a qué tipo de comportamiento los elementos ubicados en el diseño son de interés para el desarrollador. Y en diferentes situaciones, se pueden dar diferentes respuestas a la misma pregunta.

¿Estás tratando de reemplazar Flexbox con una cuadrícula?

Cuando hablo en varios eventos, la gente a menudo me pregunta cuándo usaría Flexbox en lugar de Grid, y si realmente necesitamos tecnología como Flexbox. Como vimos en el ejemplo anterior, Grid no es un reemplazo para Flexbox. Ambas tecnologías coexisten de manera bastante pacífica, y el conocimiento de las situaciones en las que cada una de ellas se muestra mejor expande las posibilidades para diseñar diseños.


Ejemplo de componente

Esta figura muestra un componente, durante el trabajo con el que es necesario controlar la colocación de texto, imagen y título, tanto teniendo en cuenta las columnas como teniendo en cuenta las filas. También aquí debe controlar cómo, en cierta medida, interactúan entre sí. La única forma de resolver satisfactoriamente este problema es utilizar la tecnología Grid.
Pero sin dudarlo, usaré la tecnología Flexbox para crear un menú de navegación, como el que se muestra en este ejemplo.


Menús creados por Flexbox

Aquí es necesario controlar la disposición de los elementos en una sola dimensión, y es necesario que los elementos se comporten de manera flexible. La tecnología Flexbox hace su trabajo perfectamente. Gracias al uso de Flexbox, puede especificar si estos elementos se deben envolver en nuevas líneas o no, lo que le permite mostrarlos con precisión si el espacio disponible en la página no le permite mostrar todos los elementos en una línea.

¿Cómo debería verse el diseño en los navegadores que no son compatibles con la tecnología Grid?

Si utilizamos la tecnología Grid, uno de los posibles problemas que debemos tener en cuenta es el soporte del navegador para esta tecnología. Inmediatamente, debemos pensar en lo que sucederá si nuestra página se muestra en uno de los navegadores que no admiten Grid (por ejemplo, en IE 11 y versiones posteriores). Mi enfoque para resolver este problema es usar las reglas de @supports y preparar el código para diferentes navegadores. A menudo (pero no siempre) I, como reemplazo de un diseño basado en Grid, utilizo un diseño basado en Flexbox para navegadores bastante antiguos.

 .grid {   display: flex;   flex-wrap: wrap;   /*  ,     */ } @supports (display: grid) {   .grid {       display: grid;       /*  ,  Grid */   } } 

Es cierto que debe tenerse en cuenta aquí que si te encuentras pasando muchas horas tratando de recrear sin usar Grid, lo que se hizo con esta tecnología, entonces tal vez no tuviste tanto desde el principio Hay muchas razones para usar Grid. Después de todo, esta tecnología es especialmente buena porque es capaz de lo que no se puede hacer exclusivamente con Flexbox.

Resumen

Discutimos algunos ejemplos muy simples y generalizados de desarrollo de diseño, examinamos las características del uso de las tecnologías Grid y Flexbox en su construcción. Esperamos haber podido pensar en algo para aquellos que están ocupados eligiendo la tecnología adecuada para su próximo diseño.

Estimados lectores! ¿En qué situaciones utiliza la tecnología Grid y en qué - Flexbox?