Grid.css: un sistema de cuadrícula mínimo para desarrolladores web

Los frameworks frontend más grandes como Bootstrap vienen con sus propias configuraciones de grid . Pero también vienen con un montón de equipaje en forma de elementos de página prediseñados y componentes de JavaScript.

Si está buscando un sistema de grillas mucho más pequeño y simplificado, le encantará Grid.css .

Esta biblioteca de código abierto gratuita viene empaquetada con el sistema de grillas tradicional de 12 columnas que puede estructurar para cualquier diseño. El CSS es realmente fácil de usar y el archivo en sí mismo solo mide 560 bytes (¡eso es medio KB!)

Comenzar es muy fácil y solo necesita un archivo CSS agregado a su encabezado.

Puede encontrar el enlace de descarga directa en la página de Grid.css o en el repositorio oficial de GitHub. Incluso podría usar la versión raw CDN para incrustar este archivo directamente desde GitHub sin tener que alojarlo usted mismo.

Ahora puede configurar la estructura de su columna con los elementos que desee (divs, secciones, etc.).

Esto generalmente incluye un elemento .row (el contenedor) junto con muchos elementos internos de columna . Las clases de columna usan números para definir su espacio total dentro del contenedor, por lo que, por ejemplo, .col4 ocupa cuatro columnas del total de doce.

Aquí hay un fragmento de ejemplo de la demostración:

Puede usar cualquier combinación de clases de columnas que desee, siempre que sumen hasta 12 .

Esto significa que también puede reestructurar la página como lo desee, utilizando diferentes contenedores de fila . Por ejemplo, podría tener un tramo grande para su encabezado pero usar dos configuraciones de filas / columnas diferentes para el cuerpo de su página.

Naturalmente, esta biblioteca es 100% gratuita y de código abierto, por lo que puede realizar modificaciones de la manera que desee.

El creador, Ahmed Tarek, también fabricó Butns, que es una variante de los muchos kits de UI de botones que hay. Se combina muy bien con Grid.css, por lo que ambas son excelentes bibliotecas para comenzar cuando se inicia un nuevo proyecto web.