Este proyecto es una colección de ejemplos prácticos y demostraciones interactivas del sistema CSS Grid. Creado por FemCoders Club, el sitio proporciona una guía visual y didáctica para entender y dominar CSS Grid para crear layouts modernos y responsivos en desarrollo web.
Este repositorio sirve como complemento práctico al artículo "CSS Grid: Domina el sistema de cuadrículas en tu página web" publicado en el blog de FemCoders Club. Mientras que el artículo ofrece una explicación teórica de los conceptos, este proyecto proporciona ejemplos interactivos y casos de uso reales para poner en práctica esos conocimientos.
- Ejemplos prácticos: Demostraciones interactivas con código para aprender mediante la práctica
- Diseño responsivo: Todos los ejemplos se adaptan a diferentes tamaños de pantalla
- Explicaciones detalladas: Cada ejemplo incluye explicaciones paso a paso y fragmentos de código
- Casos de uso reales: Ejemplos basados en escenarios comunes de desarrollo web
El proyecto contiene las siguientes páginas, cada una enfocada en un aspecto diferente de CSS Grid:
- Holy Grail Layout: Implementación del patrón clásico de diseño web con CSS Grid.
- Galería de Imágenes: Muestra de diferentes layouts para galerías de imágenes utilizando Grid.
- Grid Implícito/Explícito: Explicación de conceptos avanzados de Grid y cómo controlar el comportamiento automático.
- Layout Revista: Diseño editorial tipo revista para mostrar contenido de manera atractiva.
- Dashboard: Implementación de un dashboard administrativo con widgets organizados en Grid.
- HTML5
- CSS3 (con enfoque en CSS Grid)
- JavaScript (para interactividad)
- Font Awesome (para iconos)
La estructura del proyecto es la siguiente:
css-grid-examples/
├── index.html # Página principal
├── holy-grail.html # Ejemplo de Holy Grail Layout
├── galeria.html # Galerías de imágenes con Grid
├── grid-implicito-explicito.html # Explicación de grid implícito vs explícito
├── layout-revista.html # Ejemplo de layout estilo revista
├── dashboard.html # Dashboard administrativo
├── css/
│ ├── styles.css # Estilos generales
│ ├── holy-grail.css # Estilos específicos para Holy Grail
│ ├── galeria.css # Estilos para la galería
│ ├── grid-implicito-explicito.css # Estilos para grid implícito/explícito
│ ├── layout-revista.css # Estilos para layout revista
│ └── dashboard.css # Estilos para dashboard
├── js/
│ ├── main.js # JavaScript general
│ ├── galeria.js # JavaScript para la galería
│ ├── grid-implicito-explicito.js # JS para demo interactiva
│ └── dashboard.js # JS para dashboard
└── assests/ # Imágenes y recursos
-
Clonar el repositorio:
git clone https://github.com/femcodersclub/css-grid-examples.git cd css-grid-examples -
Abrir el proyecto:
- Abre
index.htmlen tu navegador para acceder a la página principal - Navega a través de las diferentes secciones usando el menú de navegación
- Abre
-
Experimentar con el código:
- Cada página incluye explicaciones y fragmentos de código que puedes copiar y modificar
- Prueba los controles interactivos para ver cómo cambia el diseño
Cada sección incluye desafíos para que puedas poner en práctica lo aprendido:
- Crear variaciones de los layouts presentados
- Implementar diseños responsivos con CSS Grid
- Combinar Grid con otras técnicas de CSS
¡Estamos abiertos a contribuciones! Si deseas mejorar este proyecto:
- Haz un Fork del repositorio
- Crea una nueva rama para tu función (
git checkout -b feature/nueva-funcion) - Realiza tus cambios y haz commit (
git commit -m 'Añadir nueva función') - Sube tus cambios (
git push origin feature/nueva-funcion) - Abre un Pull Request
¡Únete a nuestra comunidad en:
Comparte tus creaciones usando CSS Grid con el hashtag #FemCodersClubGrid
Este proyecto está licenciado bajo MIT License.
Agradecemos a todos los miembros de FemCoders Club que han contribuido con ideas, código y feedback para hacer posible este proyecto educativo.
© 2025 FemCoders Club. Creado con 💜 y CSS Grid.