Teoría
Teoría

La propiedad align-self en grid

Ya colocamos los elementos en la cuadrícula. Para que coincidan con el diseño, todavía debemos ajustar su alineación.

El bloque del precio debe quedar arriba, en lugar de estirarse a toda la altura de la fila. El aviso, en cambio, debe quedar en el borde inferior de la tarjeta.

En la parte anterior usamos align-items para alinear los elementos verticalmente. Esta propiedad controla la alineación de todos los elementos del contenedor. Aquí necesitamos una alineación distinta para cada uno.

Usaremos align-self, que alinea verticalmente un solo elemento. Ya la conocimos al trabajar con flexbox. Acepta los mismos valores que align-items: stretch, start, end y center.

.element {
  align-self: start;
}

Con align-self colocaremos el precio arriba y el aviso abajo. Después agregaremos otra tarjeta para ver cómo responde la distribución a un contenido distinto.

Para ver ambas tarjetas a la vez, usa el botón para alejar la vista. Está a la derecha de 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 165px 75px; grid-template-areas: "title title price" "options description description" "options disclaimer disclaimer"; gap: 20px; } .title { grid-area: title; } .price { grid-area: price; } .options-list { grid-area: options; } .description { grid-area: description; } .disclaimer { grid-area: disclaimer; }

ObjetivosRealizado

Agrega align-self con el valor start a la regla de price. El precio dejará de estirarse a toda la altura de la fila.
Agrega align-self con el valor end a la regla de disclaimer. El aviso quedará abajo, junto al borde de la tarjeta.
En index.html, quita los delimitadores de comentario del código de las líneas 25–37. Fíjate en que el precio de la segunda tarjeta sobresale del contenedor.