Crear diseños de tarjetas limpios y bien alineados es una tarea común en el desarrollo web. En este tutorial, te guiaré a través de la construcción de una cuadrícula de cuatro tarjetas por fila. Cada tarjeta contiene varios bloques de contenido: un título, una imagen, un precio, una lista con viñetas y un botón de llamada a la acción (CTA), alineados horizontalmente dentro de la tarjeta utilizando CSS Grid y la poderosa función Subgrid de CSS. Lo que construirás - Un diseño de cuadrícula de tarjetas (máximo 4 tarjetas por fila). - Cada tarjeta contiene múltiples bloques de contenido alineados horizontalmente. - Uso de CSS Grid para el diseño general. - Uso de CSS Subgrid para la alineación interna del contenido dentro de cada tarjeta. ¿Por qué usar CSS Subgrid? CSS Subgrid es una característica relativamente nueva que permite a una cuadrícula anidada heredar el tamaño de las pistas de su cuadrícula padre. Esto significa que puedes alinear el contenido interno perfectamente con la cuadrícula externa sin calcular ni duplicar manualmente los tamaños de las pistas.