CSS Grid Layout, llega la gran revolución de la maquetación

Una de las mejores noticias con las que acabamos el 2016 fue con la que nos dio Jen Simmons: “The layout revolution begins in March”.

Y es que, hasta ese momento, cuando consultábamos grid-layout en Can I Use,  muchos pensábamos que estábamos en el mundo al revés, ¿sólo funciona en IE/Edge? ¡imposible!

Grid Layout fue propuesto por Microsoft y está disponible desde su IE11, pero no fue hasta el pasado septiembre cuando se propuso como Candidate Recommendation en la W3C.

¿Qué tiene de nuevo Grid Layout?

¡Todo! Este nuevo atributo de la propiedad display nos permitirá la creación de rejillas bidimensionales, a diferencia de Flexbox que solo nos permitía manejar nuestros elementos en una sola dirección. Grid Layout es complementario a Flexbox y viceversa, por lo que en el próximo mes de marzo la maquetación tal y como la conocemos sufrirá una gran revolución.

Hasta entonces y si queréis probar en Chrome, podéis ir a chrome://flags y activar la opción “Enable experimental Web Platform features.”

Conceptos básicos sobre Grid Layout

  • display: gridal igual que ocurre con Flexbox, esta propiedad la tendrá el padre de todos los elementos que vayan a formar nuestra rejilla o grid. También podremos utilizar inline-grid, si queremos generar un grid “en línea”, o subgrid, si estamos trabajando con un grid anidado dentro de otro y queremos que éste tenga los mismos tamaños para filas/columnas que su padre.

Importante: las propiedades clear, float y vertical-align no serán aplicadas en los elementos con este tipo de display.

  • grid-template-columns y grid-template-rows: se definen en ellas el tamaño de las columnas y las filas que van a formar parte de nuestro grid. El tamaño puede ser expresado en px, % o en fr, una nueva unidad de medida que representa la fracción de espacio disponible dentro del grid.

Dentro de esta propiedad podríamos darle nombre a cada una de las filas o columnas de nuestro grid, indicándolo en la propia declaración de la propiedad:

grid-template-columns: [leftColumn] 150px [mainColumn] 500px [sideBar] auto;

Si nuestro grid tiene repeticiones estructurales, podemos utilizar el atributo repeat para no repetir valores:

grid-template-columns: repeat(4, 100px), 50px, 60; donde 4 es el número de veces que se repetirá la columna con 100px de ancho.

  • grid-column-start  y grid-column-end: nos permiten definir el inicio y el final de las columnas del grid de manera individual. Se puede unificar en una: grid-column.
  • grid-row-start  y grid-row-end: nos permiten definir el inicio y el final de las columnas del grid de manera individual. Se puede unificar en una: grid-row.
  • grid-column-gap y grid-row-gap: con ellas definimos el tamaño de las líneas de nuestro grid o lo que es lo mismo, la separación que existirá entre las filas y columnas del grid. Estas dos propiedades pueden unificarse en una: grip-gap donde se definirá siempre en este orden: grid-gap: <grid-column-gap> <grid-row-gap>.
  • justify-items, align-items, justify-content y align-content: son propiedades que tal y como usábamos en Flexbox, podemos utilizar también con Grid Layout.

Con estos principios básicos, podemos poner en práctica la especificación Grid Layout (recuerda activar “Enable experimental Web Platform features” para poder verlos).

See the Pen Grid Layout Revolution! (Basic properties) by Noe (@NoeIGZ) on CodePen.0

 

CSS Grid Layout combinado con Flexbox, el futuro de la maquetación ya está aquí!

Por cierto, este sábado 18 de febrero patrocinamos Front Fest, el eventazo sobre tecnologías web en el que participamos como patrocinadores Platinum!

Esperamos verte por allí para, como bien dicen ellos, hablar de HTML, CSS, Javascript ¡y lo que surja! Momento perfecto para conocernos porque además buscamos Front Developers, échale un vistazo a nuestra oferta y aplica!

 

Noemi Medina, Frontend developer Intelygenz