Quiz del módulo 3

Este quiz verifica si eliges el sistema de distribución según el problema y si razonas una media query mobile first. Un menú de filtros en una sola fila necesita controlar un eje; una agenda de tarjetas necesita filas y columnas. La respuesta debe relacionar la herramienta con esa estructura.

Ejemplo resuelto

Para cinco filtros que pueden saltar de línea, elegiría Flexbox. Para seis tarjetas con dos columnas y tres filas, elegiría Grid. La base móvil sería una columna y el estado amplio podría ser dos.

1. Describe si el problema tiene uno o dos ejes relevantes.

2. Elige Flexbox o Grid antes de escribir propiedades.

3. Define primero la disposición estrecha.

4. Añade una condición min-width y prueba justo antes y después del umbral.

Error frecuente y corrección

Elegir Grid para una fila de botones y después colocar cada botón manualmente complica una distribución unidimensional. Usa Flexbox y deja que el flujo gestione el salto.

Pruébalo

Responde: ¿qué usarías para una cabecera con logo y enlaces? ¿Qué usarías para cuatro tarjetas en dos columnas? ¿Qué debe ocurrir a 699 y 700 px si el umbral es 700?

Comprueba tu resultado

Una elección razonable es Flexbox para la cabecera y Grid para las tarjetas; otras soluciones pueden servir si justificas sus reglas. Con la base de una columna y el umbral indicado hay una columna a 699 px y dos a 700 px. La respuesta debe mantener el mismo contenido en ambas vistas.