Flexbox y CSS Grid en pantallas pequeñas

Flexbox y Grid son herramientas complementarias de distribución. Entender el tipo de relación que necesitas ayuda a escoger entre ellas.

Una dimensión o una cuadrícula

Flexbox suele resultar útil para distribuir elementos a lo largo de un eje. Grid permite relacionar filas y columnas.

Estas descripciones sirven como punto de partida, no como una obligación de utilizar una sola herramienta en toda la página.

Componentes dentro de la estructura

Una cuadrícula general puede contener tarjetas cuya distribución interna sea flexible. Documentar esa relación simplifica los cambios.

Comprueba qué ocurre cuando una tarjeta tiene más texto que las demás. El contenido real pone a prueba el ejemplo ideal.

Mantener el orden

La distribución visual debe conservar una secuencia comprensible para la lectura y el teclado.

Prueba los componentes por separado y dentro de la página. Una solución local puede comportarse de otra forma cuando cambia su contexto.

Seguir aprendiendo

Relaciona esta lectura con los demás recursos de Dexuno y prueba las ideas en un proyecto pequeño. Las imágenes, cuando aparecen, son ilustrativas.