Teoría
Teoría

La propiedad justify-self

Ampliamos la tercera columna y el precio de la segunda tarjeta ya no sobresale. Sin embargo, el bloque del precio quedó demasiado grande, sobre todo en la primera tarjeta. Esto ocurre porque, de manera predeterminada, los elementos grid ocupan todo el espacio disponible, tanto en alto como en ancho.

Queremos que los bloques con precios más cortos ajusten su ancho al contenido. Para ello debemos definir su alineación horizontal.

La propiedad justify-self controla la alineación horizontal de un solo elemento:

.element {
  justify-self: start;
}

Esta propiedad acepta los siguientes valores:

stretch: el elemento ocupa todo el ancho disponible.
start: el elemento ajusta su ancho al contenido y queda a la izquierda.
end: el elemento ajusta su ancho al contenido y queda a la derecha.
center: el elemento ajusta su ancho al contenido y queda centrado.

Probemos justify-self y después coloquemos el precio en el borde derecho.

justify-self no funciona en flexbox. Por eso no sirve para alinear un solo elemento en el eje principal. En ese caso suelen usarse márgenes.

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

ObjetivosRealizado

Agrega justify-self con el valor start a la regla de price. Los precios dejarán de estirarse y quedarán a la izquierda.
Cambia el valor de justify-self a center. Los precios quedarán centrados.
Ahora cámbialo a end. Los precios quedarán a la derecha de las tarjetas.