Responsive, accesibilidad y rendimiento
Flexbox y Grid permiten distribuir contenido, pero no toman las mismas decisiones. La elección se entiende mejor al observar qué ocurre cuando cambian el ancho o el número de elementos.
Vamos a comparar un catálogo ficticio de cinco piezas de cerámica. Mantendremos los textos y el espacio entre tarjetas. Cambiaremos únicamente el método de distribución.
El objetivo no es memorizar una receta. Es reconocer si necesitas que cada fila reparta su espacio o que las columnas mantengan una relación común. Si necesitas situar las capas, empieza por HTML y CSS para diseñadores.
Una fila flexible o una cuadrícula compartida
Flexbox organiza principalmente sobre un eje. Puede envolver elementos en varias filas, pero cada línea distribuye su espacio de manera independiente. Grid establece filas y columnas relacionadas.
Eso no significa «Flexbox para cosas pequeñas y Grid para grandes». Un componente pequeño puede necesitar columnas compartidas. Una franja amplia de acciones puede resolverse con un eje flexible. MDN explica esta relación entre los métodos de layout.
Dos distribuciones del mismo catálogo: Flexbox permite crecer a la última tarjeta; Grid conserva las columnas. Esquema ilustrativo. Toca para ampliar.
Preparar cinco tarjetas iguales
Guarda este documento completo como layout.html en un editor de texto plano y ábrelo en el navegador. La página es una demo local; sus tarjetas no enlazan a productos ni realizan operaciones.
<!doctype html>
<html lang="es">
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<title>Comparar dos layouts</title>
<style>
* { box-sizing: border-box; }
body {
margin: 24px;
color: #2b2b2b;
background: #faf9f7;
font: 18px/1.5 Arial, sans-serif;
}
.catalogo {
max-width: 720px;
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.catalogo > article {
flex: 1 1 200px;
min-width: 0;
padding: 16px;
border: 1px solid #5d0606;
background: white;
overflow-wrap: anywhere;
}
h2 { font-size: 22px; }
</style>
<h1>Cerámica por encargo</h1>
<section class="catalogo" aria-label="Piezas">
<article><h2>Cuenco</h2><p>Acabado mate.</p></article>
<article><h2>Jarrón</h2><p>Perfil alargado.</p></article>
<article><h2>Plato</h2><p>Serie de sobremesa.</p></article>
<article><h2>Bandeja</h2><p>Formato para compartir.</p></article>
<article><h2>Vaso</h2><p>Esmalte suave.</p></article>
</section>
</html>Observar qué decide Flexbox
Con suficiente espacio para alcanzar los 720 px del contenedor, caben tres tarjetas de unos 229 px en la primera fila. Las otras dos se reparten la segunda fila y crecen hasta unos 352 px cada una. Las cifras pueden redondearse al renderizar.
Ese crecimiento procede de flex: 1 1 200px: la tarjeta puede crecer, reducirse y parte de una base de 200 px. No hay una regla que obligue a alinear las columnas de filas distintas.
Ahora estrecha la ventana. Cuando no caben tres bases de 200 px y los dos huecos de 16 px, cambia el reparto. La decisión depende del espacio disponible, no de un modelo concreto de teléfono.
Mini tutorial: cambiar solo a Grid
En el mismo archivo, sustituye las tres declaraciones de distribución de .catalogo por estas dos. Conserva max-width y gap:
display: grid;
grid-template-columns:
repeat(auto-fit, minmax(min(100%, 200px), 1fr));Elimina también flex: 1 1 200px de las tarjetas: ya no son elementos flex. Con este Grid y las cinco piezas, los elementos de la última fila mantienen el ancho de las columnas de la primera. No se expanden para rellenar por sí solos toda la fila.
La expresión min(100%, 200px) permite que el mínimo se reduzca si el contenedor es más estrecho que 200 px. No es la única solución; aquí evita imponer una tarjeta más ancha que su espacio disponible.
Elegir por el comportamiento que necesitas
Si el catálogo necesita columnas alineadas y tarjetas comparables, esta versión de Grid ofrece una base coherente. Si un grupo de elementos debe repartir libremente su espacio por fila, la versión flexible puede encajar mejor.
Ambos métodos pueden convivir: Grid para el catálogo y Flexbox para una fila de acciones dentro de cada tarjeta. La elección tampoco garantiza por sí sola una buena jerarquía, un orden comprensible o una lectura cómoda.
Tres pruebas antes de darlo por terminado
Compara ambas versiones a 320, 768 y 1200 px de viewport, además de algún ancho intermedio. Recuerda que el contenedor de la demo no supera 720 px.
Después cambia el contenido:
- Sustituye «Vaso» por un título de dos líneas y añade una descripción más larga.
- Elimina una pieza y observa qué hace la última fila.
- Añade una sexta pieza y compara la alineación.
Comprueba que el texto permanezca visible y que el espacio entre tarjetas se mantenga. El orden visual debería seguir siendo comprensible respecto al orden del documento. Puedes continuar con la revisión mediante teclado.
Explicar la decisión antes de pedir código
Una petición concreta sería: «Necesito un catálogo con columnas compartidas, cinco tarjetas y huecos constantes. Debe reducir columnas cuando no quepan y conservar textos largos sin recortarlos. Explica qué decide el contenedor».
Para comprobar el ancho real y localizar una regla, utiliza DevTools para diseñadores. Y para valorar el conjunto, revisa diseñar para móvil.
Un layout se elige por lo que hace con el contenido cuando el espacio cambia.
