Maquetación web con CSS Grid
A finales del año 2017 el mundo del desarrollo web vivió una pequeña-gran revolución con la aparición del CSS Grid, una nueva manera de maquetar diseños en la web en un espacio de cuadrícula bidimensional, independiente al orden de posicionamiento y extremadamente flexible.
Por primera vez disponíamos de un sistema de cuadrículas nativo en los navegadores, que posibilitaba definir columnas y filas sin necesidad de fijarlas en el HTML, a fin de simplificar el proceso de situar y distribuir los elementos a lo largo y ancho de una página web.
En consecuencia, CSS Grid nos proporciona un conjunto de ventajas:
- Podemos crear diseños más complejos sin la necesidad de utilizar JavaScript en tanto que se puede trabajar con columnas y filas simultáneamente.
- Nos olvidamos de utilizar frameworks CSS externos (como Bootstrap o Foundation) o mecanismos como el posicionamiento relativo/absoluto, floats y elementos en bloque o en línea.
- Conseguimos un código mucho más comprensible y fácil de mantener en términos de desarrollo.
En un ejemplo práctico, para crear las zonas de una web con un framework CSS de 12 columnas, necesitaríamos tener un HTML como este, donde los elementos los situaríamos en la fila donde queremos que aparezcan para luego aplicar el estilo:
<div class="row">
<div class="col-xs-12 header">HEADER</div>
</div>
<div class="row">
<div class="col-xs-4 menu">MENU</div>
<div class="col-xs-8 content">CONTENT</div>
</div>
<div class="row">
<div class="col-xs-12 footer">FOOTER</div>
</div>
Al instante podemos ver como con CSS Grid el código es mucho más simple, sin necesidad de definir clases extras y filas adicionales:
<div class="grid">
<div class="header">HEADER</div>
<div class="menu">MENU</div>
<div class="content">CONTENT</div>
<div class="footer">FOOTER</div>
</div>
Cada uno de los elementos que forman las zonas de la web (header, menu, content, footer…), con CSS Grid, a diferencia de utilizar otras técnicas, los podremos colocar donde queramos sin necesidad de moverlos físicamente del HTML, utilizando pocas líneas de CSS:
* {margin: 0; padding: 0;}
.grid {display: grid; grid-template-columns: repeat(12,1fr); grid-template-rows: minmax(100px, auto) 1fr minmax(100px, auto); min-height: 100vh;}
.header {grid-column: span 12;}
.menu {grid-column: span 4;}
.content {grid-column: span 8;}
.footer {grid-column: span 12;}
Tampoco estaremos limitados a trabajar con una cuadrícula de 12 columnas (como en el ejemplo) para hacer una web adaptable a todos los tamaños de dispositivos. Si queremos que sean 5 o 3 columnas, adelante, ¡no hay problema! Y es que ahora hacer diseños flexibles no estará limitado a reglas matemáticas de grids de 960px o 1200px.
Maquetación web con CSS Grid
Y para resolver esto, apareció la nueva unidad de medida de longitud FR (una fracción) que representa partes del espacio disponible que tenemos en nuestra columna o fila, ayudándonos así a definir la extensión que queremos que llene un elemento en proporción al tamaño total que nos ocupa la web en el dispositivo donde la estamos visualizando.
Muchos afirman que CSS no es un lenguaje de programación. Y estoy de acuerdo: Es más duro. El dominio de CSS requiere habilidades en diseño, determinación, experiencia y codificación. Y es que crear código que funcione correctamente en todos los dispositivos y resoluciones de pantalla es un reto que no todos intentan o logran con éxito.
Concluyendo, CSS Grid no es en absoluto una moda más del desarrollo web que podemos o no adoptar, es el futuro de la maquetación (ahora ya presente) que ha venido para quedarse quieras o no. ¿Vamos pues?
