Generador de Flexbox y Grid

Cómo usar Generador de Flexbox y Grid

1. Elige Flexbox o Grid según tu caso.
2. Ajusta la dirección, el reparto y los espacios.
3. Copia el CSS resultante.

Cuál usar: la regla práctica

La respuesta corta: Flexbox para una dimensión, Grid para dos.

Flexbox distribuye elementos a lo largo de un eje. Es lo natural para una barra de navegación, una fila de botones, una tarjeta con icono y texto, o cualquier cosa que se alinee en una sola línea.

Grid define filas y columnas a la vez. Es lo natural para la estructura general de una página, una galería, un panel de control o un formulario con etiquetas y campos alineados.

Otra forma de decidirlo: si el tamaño de los elementos debe mandar sobre la disposición, Flexbox. Si la disposición debe mandar sobre los elementos, Grid.

No compiten. Lo habitual en un proyecto real es Grid para la estructura y Flexbox dentro de cada celda.

Y una recomendación que ahorra mucho código: usa la propiedad gap en ambos en lugar de márgenes entre elementos. Evita el clásico problema del último elemento con margen sobrante y funciona igual en los dos sistemas.

Grid sin consultas de medios

La capacidad más útil de Grid es también la menos conocida.

La combinación repeat(auto-fit, minmax(250px, 1fr)) crea una cuadrícula que ajusta sola el número de columnas al ancho disponible, sin escribir una sola consulta de medios.

Cada columna tendrá al menos 250 píxeles y crecerá para repartir el espacio sobrante. Cuando ya no caben, la cuadrícula pasa a una columna menos por sí misma.

La diferencia entre auto-fit y auto-fill está en qué ocurre cuando sobran columnas: auto-fit las colapsa y estira las existentes; auto-fill las mantiene vacías. Para una galería casi siempre quieres auto-fit.

Con grid-template-areas puedes además nombrar zonas y dibujar la estructura de forma legible, redefiniendo solo esas áreas para cambiar la disposición en móvil.

Y ten en cuenta las consultas de contenedor: permiten que un componente reaccione al ancho de su contenedor en vez de al de la ventana, que es lo que casi siempre se quería en realidad.

Los errores habituales

Cosas que hacen perder tiempo a casi todo el mundo.

Un elemento flexible no encoge por debajo del tamaño de su contenido por defecto, y eso desborda cuadrículas con textos largos o bloques de código. La solución es min-width: 0 en el elemento flexible, o overflow: hidden.

Los porcentajes en flex-basis se calculan sobre el eje principal, no siempre sobre lo que uno imagina. Suele ser más previsible usar flex: 1 1 0 y dejar que reparta.

La alineación tiene dos ejes: justify-content en el eje principal y align-items en el transversal. En Flexbox con dirección de columna, esos ejes se intercambian, y ahí se equivoca todo el mundo alguna vez.

El orden visual con order o con grid-area no cambia el orden del DOM. Quien navegue con teclado o con lector de pantalla seguirá el orden del código, así que reordenar visualmente puede dejar una página inutilizable. Cambia el HTML en lugar del CSS cuando el orden importe.

Y las alturas iguales en una fila de tarjetas ya no necesitan trucos: es el comportamiento por defecto de ambos sistemas.

Preguntas frecuentes