CSS Grid: qué es y cómo ayuda en el diseño web【Guía】

---

Desde que se empezaron a diseñar páginas web, los maquetadores web han intentado encontrar la forma de poder plasmar los elementos en la web de una manera sencilla y efectiva. Si sabes un poco de HTML sabrás que, en cuestiones de diseño, es poco efectivo y está muy limitado. Sólo tienes que recordar cómo eran las webs hace unos años, llenas de enlaces de color azul y diseños muy simples.

Con la llegada del CSS y HTML5 el diseño mejoró considerablemente y se pueden crear sitios web realmente atractivos con unas soluciones eficientes, pero aun así se suele acabar con hojas de estilo interminables y etiquetas HTML de todo tipo. Para resolver todo esto está CSS grid, una forma de maquetar sitios web eficaz, compatible y responsive que está ganando adeptos cada día que pasa.

---

CSS grid: ventajas y primeros pasos

TABLA DE CONTENIDOS

• ¿Qué es CSS grid?
• ¿Cómo funciona CSS grid?
• Primeros pasos con CSS grid
• Alinear el CSS grid

---

¿Qué es CSS grid?

La palabra grid significa cuadrícula en inglés, así que CSS grid podemos traducirlo como diseño CSS de cuadrícula. Se trata de un recurso CSS para poder distribuir un sitio web en una cuadrícula, pero teniendo el control total sobre la posición de los elementos, tanto en las filas, como en las columnas.

Esto proporciona una gran flexibilidad a los maquetadores web para aprovechar todas sus capacidades y diseñas una web tal y como tienen pensado, sin las limitaciones anteriores.

Con CSS grid se distribuyen las partes de una web en secciones más pequeñas y puedes determinar el tamaño y la posición de cada uno de los elementos que compongan la web. Quizás estés pensando que es lo mismo que una tabla, pero no es así, ya que en las tablas no puedes colocar el contenido donde quieras, ya que está limitado por su contenido, mientras que en CSS grid se pueden añadir en cualquier sitio dentro de cada una de las áreas de la fila o columna.

Todo esto, entre otras cosas, ayuda mucho a presentar la web en cualquier tipo de tamaño de pantalla, pensando en la diversidad de dispositivos que existe y que tiene acceso a una web. Además, simplifica mucho el código necesario para crear un diseño web y por lo tanto, la posibilidad de errores o problemas en el código es mucho menor.

Ahora mismo, no hay ningún navegador web actual que no sea compatible con CSS grid, así que no hay problema en utilizarlo para cualquier tipo de sitio web o aplicación.

¿Cómo funciona CSS grid?

Como hemos dicho, la característica principal de CSS grid se basa en dividir las secciones principales de una web en cuadrículas (filas y columnas) para luego poder determinar qué tamaño tendrá cada una estas. Otras características son:

• Poder determinar si el tamaño de la cuadrícula es fijo o flexible
• Colocar los elementos en cualquier ubicación exacta de la cuadrícula
• Contralar la alineación, tanto de elementos, como de toda la cuadrícula
• Superponer el contenido. Puedes añadir más de un elemento en una celda y superponerse a las demás
• Cambiar los elementos de la cuadrícula de sitio en cualquier momento de manera sencilla
• Posibilidad de colocar los elementos de forma automática con su algoritmo

Aunque se parece mucho a una tabla, cosas como la superposición de elementos es imposible de realizar si no se usa CSS grid.

Primeros pasos con CSS grid

Antes de nada, deberías de tener ciertos conocimientos sobre CSS para comprender lo que explicamos a continuación, aunque sea de forma muy básica. En CSS grid se crea un contenedor y dentro de ese contenedor se añaden los elementos. Un ejemplo sería el siguiente, en donde crearemos un contenedor que contiene 6 elementos:

Esto mostraría los 6 elementos (números) uno debajo del otro, sin más, ahora puedes determinar cómo se mostrarán en la pantalla. Para indicar en CSS grid cómo quieres colocar los elementos en filas y columnas, tienes que usar:

• grid-template-row
• grid-template-columns

Un ejemplo muy básico sería el siguiente:

.grid-contenedor { 
  grid-template-rows: 50px; 50px; 50px; 
  grid-template-columns: 50px; 50px; 50px; 
}

Hemos creado una cuadrícula de 3x3 y hemos determinado el tamaño de cada uno de los elementos en 50 píxeles, pero puedes usar cualquier otro recurso CSS para determinar el tamaño. Ahora puedes añadir las propiedades que tendrán cada uno de los elementos que hemos creado dentro del contenedor, teniendo en cuanta el espacio que existirá entre las columnas y las filas.

• column-gap (grid-column-gap)
  Es espacio entre las columnas
• row-gap (grid-row-gap)
  El espacio entre las filas
• gap (grid-gap)
  Crea un espacio entre las filas y las columnas

Esto te permitirá crear cuadrículas en las que los elemento no se muestren de manera uniforme, si no que serás tú quien determine cada uno de los tamaños y separaciones, lo que te ofrece un sin fin de posibilidades.

Alinear el CSS grid

Para alinear todos los elementos de un contenedor tenemos varias opciones. Si queremos alinear todos los elementos del contenedor de la misma forma podemos usar:

• justify-items
  Para alinear los elementos horizontales
• align-items
  Para alinear los elementos verticales
• justify-self
  Para alinear un único elemento de manera horizontal
• align-self
  Para alinear único elemento vertical

A todas estas opciones puedes añadirles los comandos que necesites:

• center
  Alineación en el centro
• end
  Alineación en la parte derecha/abajo
• start
  Alineación a la izquierda/arriba
• stretch
  Alineación distribuida al tamaño de la cuadrícula

Todo esto lo puedes combinar dentro de una cuadrícula para conseguir el diseño deseado, ya que puedes alinear cada elemento de manera individual si lo necesitas o alinear todos los elementos de la misma manera, excepto uno, dos, tres, etc.

Gracias a este sistema de alineación es posible crear cualquier tipo de diseño web que necesites, aunque necesitarás conocer un poco de CSS para poder explotarlo al máximo. Por ejemplo:

.grid-elemento-3 { 
  justify-self: start; 
  align-self: stretch; 
 } 
  
.grid-elemento-4 { 
   grid-column-start: 2; 
   grid-column-end:3; 
 } 

Conclusión

Si eres maquetador o desarrollador web y tienes que lidiar con HTML y CSS todos los días para realizar proyectos web, CSS grid puede facilitarte la vida. Si ya tienes conocimientos CSS no te costará mucho empezar a realizar proyectos con CSS grid y si ya has trabajado con Flexbox, te será aún más sencillo, ya que comparte parte de la misma filosofía.

En cualquier caso, las ventajas de CSS grid son evidentes y te permiten tener el control total del diseño de la web, así como hacer cosas que antes eran imposibles. Además, al ser tan compatible, puedes usar CSS grid en cualquier ámbito y no sólo en sitios web.

Cualquier aplicación que use una hoja de estilos CSS, puede utilizar CSS grid sin problemas. Esto también incluye cada vez más utilizadas Web Apps, apps, aplicaciones informáticas, etc.