En este repositorio encontrarás un ejercicio práctico para aprender y practicar la propiedad Grid de CSS. Este taller te permitirá estructurar un diseño utilizando un sistema de cuadrícula flexible y adaptativo.
- index.html: Este archivo ya incluye la estructura básica del diseño con las cajas y el contenido listo para estilizar.
- style.css: Aquí encontrarás los estilos aplicados a las cajas y al diseño general.
- 📄 Estructura visual: Una cuadrícula diseñada para que entiendas cómo funcionan las áreas y las filas/columnas en Grid.
- main: Contiene el ejercicio sin resolver, listo para que lo completes.
- solution: Contiene el archivo
style.cssya resuelto, con el diseño completo aplicado.
- Grid-template-columns: Define el número y tamaño de las columnas en el contenedor de la cuadrícula.
- Grid-template-rows: Define el número y tamaño de las filas en el contenedor de la cuadrícula.
- Grid-area: Asigna áreas específicas dentro de la cuadrícula para cada elemento.
- Grid-gap: Añade espacio entre las filas y columnas.
-
Cambia a la rama
mainpara realizar el ejercicio sin resolver.git checkout main
2. Abre el archivo index.html en tu navegador para visualizar la estructura inicial.
3. Explora y modifica el archivo style.css para observar cómo funcionan las propiedades de Grid.
4. Si necesitas ayuda o quieres comparar tu solución, cambia a la rama solution:
```git checkout solution```