Grid-View Layout

Grid layout se basa en la retícula empleada en diseño gráfico. La retícula surgió en la antigüedad como herramienta para pintores, escultores, arquitectos, etc. Consiste en un conjunto de línea paralelas y perpendiculares que permitía guiar la obra.

La especificación de CSS Grid Layout es relativamente nueva, y no es soportada por la mayoría de navegadores. Una buena referencia a CSS Grid Layout, podemos encontrarla en ksesocss.blogspot.com/2015/08/css-grid-layout.html.

Mientras CSS Grid Layout va siendo implementado por los fabricantes de navegadores, podemos analizar un modo alternativo de utilizar retículas sin usar Grid

Grid-View: División del espacio en columnas

Cuando empleamos Grid-View, dividimos (mentalmente) el espacio disponible en columnas.

Ejemplo de división en 12 columnas.

Para diseñar un Grid-View, creamos en CSS clases de columnas con los distintos anchos posibles:

Clases con diferentes anchos que se ajustan a las columnas predeterminadas por la rejilla

Traducido a CSS, los estilos son los siguientes:

.col-1 {width: 8.33%;} .col-2 {width: 16.66%;} .col-3 {width: 25%;} .col-4 {width: 33.33%;} .col-5 {width: 41.66%;} .col-6 {width: 50%;} .col-7 {width: 58.33%;} .col-8 {width: 66.66%;} .col-9 {width: 75%;} .col-10 {width: 83.33%;} .col-11 {width: 91.66%;} .col-12 {width: 100%;}

La idea principal en Grid-View es asignar a los diferentes elementos estructurales de la página una de estas clases, para que ocupen el espacio deseado.

Los diferentes elementos ocupan un número exacto de columnas, empleando las clases col-1 a col-12.

Midiendo el ancho de los elementos estructurales

La forma en que CSS mide el ancho de un elemento puede determinarse por la propiedad box-sizing. Por defecto, al utilizar la propiedad width, no se está incluyendo el borde, el padding, tal y como se indica en librosweb.es/libro/css/capitulo_4/margen_relleno_bordes_y_modelo_de_cajas.html. Si utilizamos la regla CSS box-sizing: border-box, la propiedad width determina el ancho incluyendo padding y borde.

Para que no hayan sorpresas y todo tenga la exactitud deseada, debemos utilizar una regla CSS como la siguiente:

* { box-sizing: border-box; }

Dando formato a los elementos estructurales

Para uniformizar el aspecto de los elementos, podemos utilizar una regla como la siguiente:

[class*="col-"] { float: left; padding: 15px; border: 1px solid red; }

Colocando los elementos

Para colocar los elementos debemos pensar en filas, como se muestra en la siguiente imagen:

La rejilla se compone de columnas y de filas. Las filas aparecen en la imagen rodeadas por un marco rojo.

Para las filas, crearemos una clase llamada row, para la que añadiremos la siguiente regla:

.row:after{ content: ""; clear: both; display:block; }

De este modo apilamos verticalmente las filas.

Todo esto junto

Prueba el siguiente ejemplo: Ejemplo sencillo con diseño Grid-View