Este ejercicio de CSS de tarjetas de precios responsive consiste en crear una sección que pase de una a tres columnas según el espacio disponible.
Enunciado
Diseña tres planes. El contenido puede tener longitudes distintas, pero los enlaces de cada tarjeta deben quedar en la parte inferior. Conserva foco visible.
Solución comentada
Prueba el fragmento dentro del cuerpo de un documento HTML. Incluye la etiqueta viewport si vas a comprobar el resultado en móvil.
<section class="planes" aria-label="Planes de mantenimiento">
<article><h2>Inicio</h2><p>19 € al mes</p><a href="/contacto/">Consultar Inicio</a></article>
<article><h2>Estudio</h2><p>39 € al mes. Incluye revisión de contenidos.</p><a href="/contacto/">Consultar Estudio</a></article>
<article><h2>Equipo</h2><p>69 € al mes</p><a href="/contacto/">Consultar Equipo</a></article>
</section>
<style>
.planes {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
gap: 1rem;
max-width: 62rem;
margin-inline: auto;
}
.planes article {
display: flex;
flex-direction: column;
padding: 1.25rem;
border: 1px solid #94a3b8;
border-radius: 1rem;
overflow-wrap: anywhere;
}
.planes a { margin-block-start: auto; color: #1d4ed8; }
.planes a:focus-visible { outline: 3px solid #1d4ed8; outline-offset: 4px; }
</style>Grid distribuye las tarjetas y Flexbox coloca el enlace tras el espacio disponible. Las tarjetas de la misma fila comparten la altura de la pista sin fijar una medida que corte contenido.
Cómo comprobar tu solución
- Prueba a 320 y 1024 píxeles de ancho.
- Duplica la descripción del segundo plan y comprueba las tarjetas de su fila.
- Aumenta el zoom y navega hasta cada enlace con Tab.
Reto adicional
Añade una etiqueta «Más elegido» a un plan. Asegúrate de que se entiende también sin color y de que no desplaza el enlace fuera del componente.
Repasa los conceptos en el tutorial de MasterCodePro.
