Teoría
Teoría

Una tarjeta con dos columnas

Construyamos otra tarjeta:

La distribución parece familiar: el contenido está dividido en dos columnas, con espacios entre filas y columnas. Para esta distribución conviene usar grid.

Sin embargo, la tarjeta es un poco asimétrica: el encabezado es más ancho que la lista de opciones y que la primera columna.

Intentemos construirla con las técnicas que ya conocemos. Primero dividiremos el contenido en dos columnas y agregaremos espacios entre ellas.

.grid-container {
  display: grid;
  grid-template-columns: 100px 200px;
  gap: 10px;
}

Después usaremos width para darle al encabezado un ancho mayor que el de la columna.

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; }

ObjetivosRealizado

Convierte la tarjeta en un contenedor grid.
Usa grid-template-columns para dividir la tarjeta en dos columnas de 260px de ancho.
Agrega espacios de 20px entre las filas y las columnas.
Crea una regla para la clase title y dale un ancho de 360px. El encabezado y la descripción se superpondrán.