Uno de los procesos más problematicos y frustrantes de CSS, sobre todo para novatos o principiantes, es el proceso de colocar y distribuir los elementos a lo largo de una página. Mecanismos como posicionamiento, floats o elementos en bloque o en línea, suelen ser insuficientes (o muy complejos) para crear un layout o estructuras para páginas web actuales.

Por lo cual los desarrolladores se apoyan en herramientas como Bootstrap o Foundation, frameworks de frontend, que hacen estas tareas un poco mas sencillas e intuitivas, al dividir la pagina en columnas o grids, ademas de tener elementos como botones y formas, que estandarizan el diseño.

Asi nace Css Grid Layout, una solución nativa de Css para manejar cuadriculas, de una forma rapida, sencilla y sin tener que instalar o depender de un framework o libreria externa.

Usando una idea parecida a las tablas, el grid layout permite alinear elementos en columnas y filas. Sin embargo, a diferencia de las tablas, el diseño de la cuadrícula no tiene estructura de contenido, lo que permite una gran variedad de diseños no posibles en las tablas.

Por ejemplo, los elementos secundarios de un contenedor de cuadrícula podrían posicionarse de manera que se solapen y se superpongan, similar a los elementos posicionados en CSS.

Como usar Css Grid Layout ?

utilizaremos el siguiente codigo de ejemplo

Para definir que es un area con grid hay que utilizar un elemento contenedor con la propiedad display y dar un valor de grid o inline-grid. Es posible crear cuadrículas con un tamaño explícito. Para ello, sólo tenemos que usar las propiedades CSS grid-template-columns y grid-template-rows, que sirven para indicar las dimensiones de cada celda de la cuadrícula entre columnas y filas.

Con estos valores, indicamos que tenemos 2 columnas, una con 50px de ancho y la otra con 300px de ancho. Con dos filas la primera de 200px de alto y la otra con 75px de alto. Dependiendo de las cantidades de items que se tengan, asi sera la cuadricula. Para este ejemplo la  nuestra sera de 2×2, por que tenemos 4 items, si tuvieramos 6 seria 2×3, 8 seria 2×4. Si el numero de items es impar, la ultima celda quedaria vacia.

Estos nuevos atributos abren un mundo nuevo de posibilidades en el diseño de nuestras aplicaciones web. Lo bueno es que ya esta disponible para la mayoria de navegadores ( IE +11).

 

 

Share: