Teoría
Teoría

Una distribución asimétrica con tres columnas

Le dimos al encabezado un ancho mayor que el de la columna. Como resultado, sobresale de su columna y se superpone con la descripción.

Para corregirlo, dividiremos la tarjeta en tres columnas. El encabezado, la descripción y el aviso ocuparán dos columnas, mientras que la lista de opciones ocupará dos filas.

Encontrar una buena estructura para un contenedor grid puede llevar algo de trabajo. Cuando los elementos están distribuidos de forma asimétrica, a menudo se necesitan más columnas de las que parece a primera vista.

Dividamos el contenido en tres columnas y hagamos que el encabezado ocupe dos usando grid-column y la palabra clave span.

.element {
  grid-column: span 2;
}

Ya no necesitaremos width en el encabezado: su ancho quedará limitado por las dos primeras columnas.

Para facilitar el trabajo, la cuadrícula del contenedor grid aparece resaltada en la vista previa.

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> </body> </html>

CSS

.card { width: 540px; padding: 20px; display: grid; grid-template-columns: 260px 260px; gap: 20px; } .title { width: 360px; }

ObjetivosRealizado

Divide la tarjeta en tres columnas. Dale un ancho de 260px a la primera, 165px a la segunda y 75px a la tercera.
Elimina width de la regla de la clase title.
Agrega grid-column con el valor span 2 a esa regla.
Fíjate en que la descripción del plan quedó en la primera fila, en lugar del precio.