Este proyecto es una demostración de cómo crear una página web completamente responsive utilizando CSS Grid Layout y las funciones auto-fill() y auto-fit() sin emplear una sola línea de media queryes. También se utiliza la función clamp() para un ajuste fluido de la tipografía, adaptándose al tamaño del viewport de manera dinámica.
Puedes ver la demo del proyecto en vivo aquí: https://alexmonzdev.github.io/css_gridlayout_sample/
-
Grid Layout Avanzado:
- El diseño utiliza las funciones
auto-fill()yauto-fit()para crear un grid responsive que se adapta automáticamente a los cambios de tamaño de la ventana. - No se han utilizado media queries, lo que hace que el diseño sea simple y eficiente.
- El diseño utiliza las funciones
-
Tipografía Fluida:
- El tamaño del texto se ajusta dinámicamente utilizando la función clamp(), que permite especificar un valor mínimo, preferido y máximo de tamaño para cada fuente.
-
Ilustraciones Generadas con IA:
- La página incluye ilustraciones generadas con herramientas de inteligencia artificial para mostrar cómo se pueden integrar imágenes de alta calidad en el diseño.
-
Animación Final:
- Al final de la página se incluye un GIF como un toque interactivo para mejorar la experiencia del usuario.
-
HTML5 para la estructura del contenido.
-
CSS3 para el diseño utilizando:
- CSS Grid Layout con
auto-fill()yauto-fit(). - clamp() para tipografía responsive.
- No se han utilizado media queries en todo el diseño.
- CSS Grid Layout con
-
Illustraciones generadas por IA para darle un toque visual al proyecto.
- Clona este repositorio en tu máquina local:
git clone https://github.com/tu-usuario/nombre-del-repo.git