Una cuadrícula de proyectos responsive
CSS sin la C: layouts con Grid
Todo gran portafolio necesita una forma limpia de mostrar tu trabajo. El patrón clásico es una cuadrícula de tarjetas de proyectos: filas y columnas ordenadas que se reacomodan automáticamente cuando cambia el tamaño de la pantalla.
A la antigua usanza había que pelearse con floats y clearfixes. ¿La forma nueva? Describes lo que quieres — «tres columnas iguales con un espacio entre ellas» — y las utilidades de grid de Tailwind hacen el resto. Sin necesidad de un archivo CSS.
En esta lección construirás una cuadrícula de proyectos responsive: un encabezado y, debajo, un contenedor grid con tres tarjetas. Al terminar entenderás grid, grid-cols-3 y gap — las tres herramientas que usarás una y otra vez.
Instrucciones
Añade un encabezado de sección h2 encima de tu cuadrícula para que las visitas sepan qué están viendo.
Pista: Usa: `<h2 class="text-3xl font-bold mb-8 text-center">Proyectos seleccionados</h2>`
¿Dónde va esto?
<!-- Construye tu cuadrícula de proyectos aquí -->Escríbelo en la línea 12: debajo de ese comentario, después del código que ya añadiste.
Crea un div contenedor de cuadrícula usando grid con un gap entre tarjetas.
Haz que la cuadrícula muestre tres columnas iguales en pantallas medianas y mayores.
Añade al menos una tarjeta de proyecto dentro de la cuadrícula usando un elemento article con un título y una descripción.
Tu código
Describe lo que quieres construir para este paso y escribiré el código — luego haz clic en Aplicar para llevarlo a tu editor. Este paso: Añade un encabezado de sección h2 encima de tu cuadrícula para que las visitas sepan qué están viendo.