Cree diseños modernos fácilmente con Gridlex CSS Grid System
El desarrollo frontend ha mejorado radicalmente con la introducción de CSS flexbox. Esto hace que sea mucho más fácil crear grillas y columnas que naturalmente cambian para diseños sensibles.
En lugar de codificar su propia cuadrícula de flexbox desde cero, es mucho más fácil usar una herramienta como Gridlex. Esta biblioteca gratuita de código abierto de Flexbox es superligero y muy fácil de personalizar.
Todo lo que haces es añadir la hoja de estilo Gridlex a su página web y Trabajar con sus clases de grilla.. Las columnas internas toman una clase .columna y envuelves todo esto dentro de una .cuadrícula envase. Esto define cada columna. en el mismo ancho y crea una interfaz uniforme.
Esta por defecto puede ser anulado añadiendo clases de tamaño a cada columna. De esta manera, puede tener una columna al 70% de ancho y otra columna al 30% de ancho (por ejemplo, contenido / barra lateral).
Encontrarás toneladas de muestras de rejilla en la página de inicio de Gridlex con demostraciones en vivo y fragmentos de código para copiar / pegar en su sitio. Es una biblioteca enorme con tantos clases opcionales Para ayudarte a construir las grillas más simples para cualquier sitio web..
Todas las cuadrículas se suman a una total de 12 mini-columnas, para que pueda definir cuánto espacio debe ocupar cada columna. Esto puede parecer confuso, pero tiene sentido cuando ve las demostraciones visuales.
Aquí está un ejemplo de código utilizado para una rejilla más grande con anchos variables:
.........
Tenga en cuenta que el .cuadrícula clase contiene todo y las columnas intentan dividido en 12 partes (en el ejemplo esto sería ⅓ ancho para cada uno). Sin embargo, las columnas fijas abarcan 2 y 6 cols respectivamente, así que la primera columna utiliza un ancho automático basado en lo que quede.
Usando las otras dos columnas, podemos deducir que habría 4 columnas (12-6-2) a la izquierda para golpea un total de 12. Todo es muy simple, pero los nombres de las clases pueden ser confusos. Una vez que comience a jugar con Gridlex en un proyecto, obtendrá el sistema de nombres rápidamente.
Gridlex es actualmente en la versión 2.x y es constantemente siendo actualizado en GitHub. A medida que crece el soporte del navegador, le garantizo más atención a flexbox, con más sitios que adoptan este modelo para cuadrículas de página.
Incluso puedes encontrar un galería completa de sitios web que ejecutan Gridlex para ver cómo se ve esto cuando se aplica a sitios web en vivo.
Si nunca ha usado Flexbox antes, Gridlex puede ser una biblioteca divertida para jugar. Pero también recomiendo practicar primero usando divertidos juegos de flexbox para poner a prueba tus conocimientos y ayudarte a entender los aspectos fundamentales.
Gridlex es disponible gratis en el repositorio de GitHub o puedes tirar de él a través de npm o bower. Ofrece documentación completa en el sitio principal, incluidas demostraciones para columnas de ancho variable y consultas de medios.
Tienes control total sobre el diseño flexbox y solo toma algunas clases de CSS ¡para que esto ocurra! Y si alguna vez tiene una pregunta rápida o quiere compartir un sitio que construyó con Gridlex, puede enviar un mensaje al creador en Twitter @webdevlint.
