Teoría
Teoría

Áreas que ocupan varias filas

Ya conocimos las áreas de grid, extendimos el encabezado a dos columnas y movimos el precio a la primera fila. Ahora faltan los demás elementos. Primero elegiremos nombres para sus áreas:

Después describiremos la plantilla. La descripción del plan y el aviso deben ocupar dos columnas; ya sabemos hacerlo. Fíjate en la lista de opciones: debe pasar a la primera columna y ocupar dos filas.

En grid-template-areas puedes escribir tantas filas como necesites. Cada fila va entre comillas, ¡pero el punto y coma solo se escribe después de la última! Para ver mejor la estructura, las filas suelen escribirse una debajo de otra:

grid-template-areas: "title title price"
                     "options description description";

Para extender un área a varias filas, basta con repetir su nombre en esas filas. Queremos que la lista de opciones ocupe dos:

grid-template-areas: "title title price"
                     "options description description"
                     "options disclaimer disclaimer";

Completemos grid-template-areas con todas las áreas necesarias. Después asignaremos el área correspondiente a la lista de opciones y comprobaremos que pase a la primera columna y ocupe dos filas.

En el siguiente ejercicio terminaremos de colocar la descripción y el aviso.

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 165px 75px; grid-template-areas: "title title price"; gap: 20px; } .title { grid-area: title; } .price { grid-area: price; }

ObjetivosRealizado

Agrega dos filas más a la plantilla de la tarjeta:
"options description description"
"options disclaimer disclaimer".
Asigna el área options al elemento con la clase options-list. La lista de opciones pasará a la primera columna y ocupará dos filas.