Saltar al contenido principal
Codigo Heroe
Tarea anterior
Distribución de componentes11/17
A la lista de tareas
  1. 1. Columnas para un componente
  2. 2. Flexbox dentro de grid
  3. 3. Márgenes y relleno de los enlaces
  4. 4. Enlaces con cajas de bloque
  5. 5. Alineación vertical con align-items
  6. 6. Varias líneas con flex-wrap
  7. 7. Ancho y relleno de las tarjetas
  8. 8. Distribución con justify-content
  9. 9. Separación con margin
  10. 10. Márgenes y :nth-child
  11. 11. Pruebas con distintos anchos
  12. 12. Columnas con repeat y separación con gap
  13. 13. El valor auto-fit
  14. 14. La función minmax
  15. 15. La propiedad grid-column
  16. 16. La propiedad grid-row
  17. 17. La propiedad grid-auto-flow
Siguiente tarea
  • Matriz de skills
  • Cursos
  • Registro
  • Iniciar sesión

Loading…
En unos segundos, estará listo.

  • Teoría
  • Teoría

Pruebas con distintos anchos

La lista se ve muy bien. Es hora de ponerla a prueba.

Ya hablamos de las pruebas cuando creamos la navegación. Entonces comprobamos si el contenido se desbordaba. Ahora veremos cómo se comporta la distribución con distintos anchos de ventana. Es importante hacerlo porque las personas que visitan un sitio usan pantallas de distintos tamaños, y la página debe funcionar en todas.

Para probar la lista de tarjetas, simularemos distintos anchos de ventana cambiando la propiedad width de <body>. El ancho de la página determina cuántas tarjetas caben en cada fila. Veamos qué pasa si caben más o menos de tres.

Para evitar que aparezca una barra de desplazamiento horizontal al aumentar el ancho de la página, usa el botón para alejar la vista. Está a la derecha del mininavegador.

Botones para ajustar el zoom
  • index.html
  • style.css
HTML
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="list-decorative.css"> <link rel="stylesheet" href="style.css"> <title>Lista de tarjetas</title> </head> <body> <ul class="cards-list"> <li class="card"> <img src="img/coffee-1.jpg" alt="Café: el largo viaje del cafeto a tu taza" width="110" height="110"> <h2>Café: el largo viaje del cafeto a tu taza</h2> </li> <li class="card"> <img src="img/coffee-2.jpg" alt="Las mejores cafeteras para casa" width="110" height="110"> <h2>Las mejores cafeteras para casa</h2> </li> <li class="card"> <img src="img/coffee-4.jpg" alt="Consejos de barista: ¿qué café elegir?" width="110" height="110"> <h2>Consejos de barista: ¿qué café elegir?</h2> </li> <li class="card"> <img src="img/coffee-5.jpg" alt="Recetas para Año Nuevo" width="110" height="110"> <h2>Recetas para Año Nuevo</h2> </li> <li class="card"> <img src="img/coffee-7.jpg" alt="Guía de métodos alternativos de preparación" width="110" height="110"> <h2>Guía de métodos alternativos de preparación</h2> </li> </ul> </body> </html>
CSS
body { width: 490px; margin: 15px; } .cards-list { display: flex; justify-content: flex-start; flex-wrap: wrap; margin: 0; padding: 20px; } .card { width: 110px; padding: 15px; margin-right: 15px; margin-bottom: 15px; } .card:nth-child(3n) { margin-right: 0; }

El código ha cambiado, haz clic en "Actualizar" o activa la ejecución automática.

Ha ido a otra página

Haga clic dentro del mininavegador para poner el foco en esta ventana.

100%
ObjetivosRealizado
0
    1. Cambia el ancho de body a 350px.
      Ahora solo caben dos tarjetas por fila. Aparece un espacio sobrante junto al borde derecho del contenedor, y la tercera y la cuarta tarjeta quedan pegadas.
    2. Cambia el ancho de body a 645px.
      Ahora hay cuatro tarjetas en la primera fila. Vuelve a aparecer un espacio sobrante, y la tercera y la cuarta tarjeta quedan pegadas.
    Codigo Heroe

    © 2023-2026, codigoheroe.com