Saltar al contenido principal
Codigo Heroe
Tarea anterior
Distribuciones complejas de componentes16/18
A la lista de tareas
  1. 1. Ancho y relleno de las tarjetas
  2. 2. Márgenes entre elementos flex
  3. 3. La propiedad align-items en flexbox
  4. 4. La dirección del eje principal
  5. 5. El orden visual con order
  6. 6. La propiedad align-self en flexbox
  7. 7. Márgenes y rellenos de los elementos flex
  8. 8. Prueba de una imagen más grande
  9. 9. Imágenes que se ajustan al contenedor
  10. 10. Una tarjeta con dos columnas
  11. 11. Una distribución asimétrica con tres columnas
  12. 12. Áreas de grid
  13. 13. Áreas que ocupan varias filas
  14. 14. Reglas de las áreas de grid
  15. 15. La propiedad align-self en grid
  16. 16. Ajustar el ancho de las columnas
  17. 17. La propiedad justify-self
  18. 18. Prueba de la tarjeta con más contenido
Siguiente tarea
  • Matriz de skills
  • Cursos
  • Registro
  • Iniciar sesión

Loading…
En unos segundos, estará listo.

  • Teoría
  • Teoría

Ajustar el ancho de las columnas

Agregamos una segunda tarjeta. Su precio es más ancho que la tercera columna y sobresale del contenedor. Necesitamos ampliar la columna para que quepa.

Tendremos que cambiar la plantilla: ampliar la tercera columna y reducir la segunda. ¿Cuánto debe medir cada una? Probemos con el mismo ancho para ambas. Así habrá espacio para el encabezado y para un precio bastante alto. Esta sería la tarjeta si el precio llegara a un millón de rublos:

Diseño de la tarjeta

Por supuesto, si el precio llegara a 10 millones, habría que volver a ajustar las columnas. Pero parece poco probable para un plan de telefonía.

Al trabajar con un diseño, recuerda que ni la persona más detallista puede mostrar todos los estados posibles de un componente. Antes de construirlo, hay que analizar el diseño, pensar cómo puede cambiar el contenido y tenerlo en cuenta en el CSS.

Cambiemos el ancho de las columnas y veamos qué ocurre con los precios.

  • index.html
  • style.css
HTML
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="card-decorative.css"> <link rel="stylesheet" href="style.css"> <title>Plan</title> </head> <body> <article class="card"> <h2 class="title">Plan «Charla sin fin» con un paquete adicional de SMS</h2> <div class="description"> <p>El plan para quienes disfrutan conversar.</p> </div> <ul class="options-list"> <li class="options-item">Llamadas ilimitadas.</li> <li class="options-item">Redes sociales ilimitadas.</li> <li class="options-item">Mensajería ilimitada.</li> <li class="options-item">600 SMS al día.</li> </ul> <div class="price">999₽</div> <div class="disclaimer">No constituye una oferta vinculante.</div> </article> <article class="card"> <h2 class="title">Plan «Simple»</h2> <div class="description"> <p>El plan para quienes no quieren hacer cuentas.</p> </div> <ul class="options-list"> <li class="options-item">1 llamada.</li> <li class="options-item">1 SMS.</li> </ul> <div class="price">100000₽</div> <div class="disclaimer">Solo para nuevos clientes.</div> </article> </body> </html>
CSS
.card { width: 540px; padding: 20px; display: grid; grid-template-columns: 260px 165px 75px; grid-template-areas: "title title price" "options description description" "options disclaimer disclaimer"; gap: 20px; } .title { grid-area: title; } .price { grid-area: price; align-self: start; } .options-list { grid-area: options; } .description { grid-area: description; } .disclaimer { grid-area: disclaimer; align-self: end; }

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. Dale un ancho de 120px a la segunda y a la tercera columna.
      El precio de la segunda tarjeta dejará de sobresalir, pero el bloque del precio de la primera quedará demasiado ancho.
    Codigo Heroe

    © 2023-2026, codigoheroe.com