Introducción a CSS Grid Layout

CSS Grid Layout

Introducción a CSS Grid Layout

Flexbox es unidimensional. Es capaz de disponer los elementos hijos formando filas o columnas. Pero lo que no puede hacer de ningún modo es disponer los elementos hijos formando filas y columnas al mismo tiempo. Cuando a un elemento HTML le indicamos display: flex;, por defecto, va a disponer todos sus elementos hijos formando una única fila. Tenemos la posibilidad de indicar que queremos que los elementos hijos se dispongan formando una columna con flex-direction, pero no podemos hacer que algunos hijos se dispongan formando filas y otros columnas todo al mismo tiempo. Sin embargo, Grid es bidimensional.

Es decir, nos va a permitir disponer los elementos hijos combinando filas y columnas sin problemas. Lo cual nos va a dar una mayor libertad a la hora de disponer los elementos en la página Web, y también, una mayor flexibilidad para realizar diseños adaptativos, ya que vamos a tener un mayor grado de control sobre cómo se disponen los elementos.

¿ Cómo funciona el Grid ?

De forma similar a Flexbox, cuando indicamos a un elemento HTML que va a usar Grid, en realidad esto va a afectar a la disposición de sus hijos. Concretamente, vamos a colocar los elementos hijos sobre una rejilla formada en el elemento padre. Los bordes de las cajas hijas estarán “anclados” a las líneas de dicha rejilla.

De forma similar a Flexbox, a la caja padre le debemos de indicar display: grid; si queremos que se comporte como un elemento en bloque o display: inline-grid; si queremos que se comporte como un elemento en línea.

Además, deberemos de indicar con grid-template-rows y grid-template-columns, como es la rejilla que vamos a usar para colocar los elementos hijos.

Finalmente, a cada elemento hijo le podemos indicar exactamente dónde va a ir situado en la rejilla usando las propiedades CSS grid-column y grid-row. Esto implica que el orden de los elementos hijos en el HTML no es realmente importante, y que lo podremos alterar sin problemas si lo necesitamos cuando hagamos el responsive.

Como ejemplo, vamos a crear un diseño que sería imposible de realizar con Flexbox. Para este diseño vamos a necesitar una rejilla de 3×3. Después colocaremos 5 elementos hijos dentro de esa rejilla. Es importante tener en cuenta que el Grid no nos va a permitir hacer un “Tetris”. Los elementos hijos van a tener todos forma rectangular.

El código HTML será el siguiente:

<div id="grid">
  <div id="p1">1</div>
  <div id="p2">2</div>
  <div id="p3">3</div>
  <div id="p4">4</div>
  <div id="p5">5</div>
</div>

Y el código CSS será:

#grid {
  display: grid; /* CSS Grid Layout */
  /* con grid-template indicamos cuantas filas
     y columnas tiene la rejilla y de que tamaño son */
  grid-template-columns: 200px 200px 200px; /* 3 columnas de 200px cada una */
  grid-template-rows: 200px 200px 200px; /* 3 filas de 200px cada una */
}

#grid>div {
  border: 1px solid black;
}

Por ahora el resultado es el siguiente:

Ejemplo de CSS Grid Layout #1

Tal y como se puede observar, los 5 elementos hijos se han dispuesto en lo que parece una rejilla de 3×3, con filas y columnas de 200px de ancho. Una rejilla de 3×3 tiene un total de 9 celdas, pero como solo tenemos 5 elementos, solo son “visibles” las 5 primeras. Si el Grid necesita usar más filas de las indicadas en la propiedad CSS grid-template-rows, las añadirá automáticamente.

Si queremos que el primer hijo ocupe las dos primeras celdas, deberemos de indicar en que líneas de la rejilla empieza y termina dicho elemento. Tal y como se puede observar en la imagen anterior, una rejilla de 3×3 tiene 4 líneas verticales (y aunque no se aprecie en la imagen, también tiene 4 líneas horizontales). Por lo que si añadimos el siguiente código CSS:

#p1 {
  grid-column-start: 1; /* empieza en la primera línea de columnas */
  grid-column-end: 3; /* termina en la tercera línea de columnas */
  grid-row-start: 1; 
  grid-row-end: 2;
  background: red;
}

Obtendremos el siguiente resultado:

Ejemplo #2

Tal y como se puede observar, el primer hijo se ha dispuesto en la posición de la rejilla que hemos indicado, mientras que el resto se han colocado de forma automática. Ahora vamos a colocar el segundo hijo, pero esta vez formando una columna en lugar de una fila.

#p2 {
  /* grid-column es una abreviatura de grid-column-start y grid-column-end */
  grid-column: 3 / 4; 
  /* grid-row es una abreviatura de grid-row-start y grid-row-end */
  grid-row: 1 / 3; 
  background: green;
}

Ejemplo #3

Ahora vamos a colocar el tercer hijo de nuevo formando una fila.

#p3 {
  /* grid-area es una abreviatura de grid-column y grid-row */
  grid-area: 3 / 2 / 4 / 4; /* equivale a grid-row: 3 / 4; grid-column: 2 / 4; */
  background: blue;
}

Ejemplo #4

Y finalmente vamos a terminar de colocar el cuarto hijo, el quinto no necesitamos indicar su posición ya que simplemente se quedará en el único hueco del Grid que le vamos a dejar vacío.

#p4 {
  /* grid-area: inicio fila / inicio columna / fin fila / fin columna; */
  grid-area: 2 / 1 / 4 / 2; 
  background: yellow;
}

Ejemplo #5

Tal y como se ha podido observar, la propiedad CSS grid-area es una abreviatura de las propiedades grid-row y grid-column. Y de forma similar, grid-row es una abreviatura de grid-row-start y grid-row-end. Y lo mismo sucede con grid-column que es una abreviatura de grid-column-start y grid-column-end.

También existe otra abreviatura para indicar la rejilla en el elemento padre.

#grid {
  display: grid; /* CSS Grid Layout */
  /* grid-template es una abreviatura de 
     grid-template-columns y grid-template-rows */ 
  grid-template: 200px 200px 200px / 200px 200px 200px; /* filas / columnas */
}

Nombres de líneas

En lugar de trabajar con números, existe la posibilidad de darle nombre a las líneas del Grid. Para ello simplemente debemos de indicar el nombre entre los tamaños cuando definimos la rejilla.

#grid {
  display: grid; /* CSS Grid Layout */
  grid-template-rows: [primera] 200px [dos] 200px [tres] 200px [ultima];
  grid-template-columns: [first] 200px [second] 200px [third] 200px [last];
}

(Nota: podemos darle más de un nombre a una misma línea usando un espacio para separarlos [nombre1 nombre2].)

Después, simplemente en lugar de indicar los números hay que indicar los nombres.

#p4 {
  grid-area: dos / first / ultima / second; 
  background: yellow;
}

Separación entre celdas

Es posible indicar una separación entre las celdas del Grid mediante el atributo CSS grid-gap (que es una abreviatura de grid-row-gap y grid-column-gap).

#grid {
  display: grid; /* CSS Grid Layout */
  grid-template: 200px 200px 200px / 200px 200px 200px; 
  grid-gap: 10px 20px; /* separación entre filas y columnas */
  /* NOTA: si indicamos un solo valor se aplicará el mismo valor 
     tanto a las filas como a las columnas */
}

Ejemplo #6

Tamaño de la rejilla del Grid

En el ejemplo anterior simplemente hemos usado pixeles para definir el tamaño de las filas y las columnas, pero además de otras unidades similares como em o rem, o el uso de porcentajes con %, tenemos también las siguientes alternativas:

  • auto – si indicamos este valor, las filas o columnas tendrá un tamaño según el contenido.
  • fr – esta es una nueva unidad similar al funcionamiento de la propiedad CSS flex-grow del Flexbox. Es un valor que indica que proporción del espacio libre (si lo hay) se asignará a la fila o columna.

Vamos a modificar el ejemplo anterior con estas nuevas unidades.

#grid {
  display: grid; /* CSS Grid Layout */
  /* La primera columna medira 100px de ancho.
     Del ancho restante, la tercera columna 
     se quedará el doble de ancho que la primera. */
  grid-template-columns: 100px 1fr 2fr;
  /* La altura de la primera fila dependerá del contenido.
     Si hacen falta más filas (va a ser que si), se crearán
     automáticamente con altura automática.
  */
  grid-template-rows: auto;
}

Esta vez la rejilla ocupará todo el ancho del elemento #grid. La primera columna será de tan solo 100px de ancho, y las otras dos se repartirán el ancho restante de forma no proporcional. Respecto a la altura, dependerá del contenido, que en este caso es muy escaso, por lo que el resultado será el siguiente:

Ejemplo de CSS Grid Layout #7

Y por ahora nada más. Espero que os haya resultado interesante esta introducción a este nuevo sistema de Layout. En un próximo artículo veremos otros aspectos como las áreas de CSS Grid Layout, o como realizar el responsive.

 

Escribe un comentario