{"id":9127,"date":"2020-01-30T17:19:21","date_gmt":"2020-01-30T15:19:21","guid":{"rendered":"https:\/\/www.espai.es\/blog\/?p=9127"},"modified":"2021-09-13T20:36:38","modified_gmt":"2021-09-13T18:36:38","slug":"introduccion-a-css-grid-layout","status":"publish","type":"post","link":"https:\/\/www.espai.es\/blog\/2020\/01\/introduccion-a-css-grid-layout\/","title":{"rendered":"Introducci\u00f3n a CSS Grid Layout"},"content":{"rendered":"

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

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\u00e1gina Web, y tambi\u00e9n, una mayor flexibilidad para realizar dise\u00f1os adaptativos, ya que vamos a tener un mayor grado de control sobre c\u00f3mo se disponen los elementos.<\/p>\n

\u00bf C\u00f3mo funciona el Grid ?<\/h2>\n

De forma similar a Flexbox<\/strong>, cuando indicamos a un elemento HTML que va a usar Grid,<\/strong> en realidad esto va a afectar a la disposici\u00f3n 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\u00e1n \u201canclados\u201d a las l\u00edneas de dicha rejilla.<\/p>\n

De forma similar a Flexbox<\/strong>, a la caja padre le debemos de indicar display: grid;<\/em><\/strong> si queremos que se comporte como un elemento en bloque o display: inline-grid;<\/em><\/strong> si queremos que se comporte como un elemento en l\u00ednea.<\/p>\n

Adem\u00e1s, deberemos de indicar con grid-template-rows<\/em><\/strong> y grid-template-columns<\/em><\/strong>, como es la rejilla que vamos a usar para colocar los elementos hijos.<\/p>\n

Finalmente, a cada elemento hijo le podemos indicar exactamente d\u00f3nde va a ir situado en la rejilla usando las propiedades CSS grid-column<\/em><\/strong> y grid-row<\/em><\/strong>. 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<\/em>.<\/p>\n

Como ejemplo, vamos a crear un dise\u00f1o que ser\u00eda imposible de realizar con Flexbox<\/strong>. Para este dise\u00f1o vamos a necesitar una rejilla de 3×3. Despu\u00e9s colocaremos 5 elementos hijos dentro de esa rejilla. Es importante tener en cuenta que el Grid<\/strong> no nos va a permitir hacer un \u201cTetris\u201d. Los elementos hijos van a tener todos forma rectangular.<\/strong><\/p>\n

El c\u00f3digo HTML ser\u00e1 el siguiente:<\/p>\n

\r\n<div id=\"grid\">\r\n  <div id=\"p1\">1<\/div>\r\n  <div id=\"p2\">2<\/div>\r\n  <div id=\"p3\">3<\/div>\r\n  <div id=\"p4\">4<\/div>\r\n  <div id=\"p5\">5<\/div>\r\n<\/div>\r\n<\/pre>\n
Y el c\u00f3digo CSS ser\u00e1:<\/p>\n
\r\n#grid {\r\n  display: grid; \/* CSS Grid Layout *\/\r\n  \/* con grid-template indicamos cuantas filas\r\n  y columnas tiene la rejilla y de que tama\u00f1o son *\/\r\n  grid-template-columns: 200px 200px 200px; \/* 3 columnas de 200px cada una *\/\r\n  grid-template-rows: 200px 200px 200px; \/* 3 filas de 200px cada una *\/\r\n}\r\n\r\n#grid>div {\r\n  border: 1px solid black;\r\n}\r\n<\/pre>\n
Por ahora el resultado es el siguiente:<\/p>\n
\"Ejemplo<\/p>\n
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 \u201cvisibles\u201d las 5 primeras. Si el Grid<\/strong> necesita usar m\u00e1s filas de las indicadas en la propiedad CSS grid-template-rows<\/em><\/strong>, las a\u00f1adir\u00e1 autom\u00e1ticamente.<\/p>\n
Si queremos que el primer hijo ocupe las dos primeras celdas, deberemos de indicar en que l\u00edneas 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\u00edneas verticales (y aunque no se aprecie en la imagen, tambi\u00e9n tiene 4 l\u00edneas horizontales). Por lo que si a\u00f1adimos el siguiente c\u00f3digo CSS:<\/p>\n
\r\n#p1 {\r\n  grid-column-start: 1; \/* empieza en la primera l\u00ednea de columnas *\/\r\n  grid-column-end: 3; \/* termina en la tercera l\u00ednea de columnas *\/\r\n  grid-row-start: 1;\r\n  grid-row-end: 2;\r\n  background: red;\r\n}\r\n<\/pre>\n
Obtendremos el siguiente resultado:<\/p>\n
\"Ejemplo<\/p>\n
Tal y como se puede observar, el primer hijo se ha dispuesto en la posici\u00f3n de la rejilla que hemos indicado, mientras que el resto se han colocado de forma autom\u00e1tica. Ahora vamos a colocar el segundo hijo, pero esta vez formando una columna en lugar de una fila.<\/p>\n
\r\n#p2 {\r\n  \/* grid-column es una abreviatura de grid-column-start y grid-column-end *\/\r\n  grid-column: 3 \/ 4;\r\n  \/* grid-row es una abreviatura de grid-row-start y grid-row-end *\/\r\n  grid-row: 1 \/ 3;\r\n  background: green;\r\n}\r\n<\/pre>\n
\"Ejemplo<\/p>\n
Ahora vamos a colocar el tercer hijo de nuevo formando una fila.<\/p>\n
\r\n#p3 {\r\n  \/* grid-area es una abreviatura de grid-column y grid-row *\/\r\n  grid-area: 3 \/ 2 \/ 4 \/ 4; \/* equivale a grid-row: 3 \/ 4; grid-column: 2 \/ 4; *\/\r\n  background: blue;\r\n}\r\n<\/pre>\n
\"Ejemplo<\/p>\n
Y finalmente vamos a terminar de colocar el cuarto hijo, el quinto no necesitamos indicar su posici\u00f3n ya que simplemente se quedar\u00e1 en el \u00fanico hueco del Grid<\/strong> que le vamos a dejar vac\u00edo.<\/p>\n
\r\n#p4 {\r\n  \/* grid-area: inicio fila \/ inicio columna \/ fin fila \/ fin columna; *\/\r\n  grid-area: 2 \/ 1 \/ 4 \/ 2;\r\n  background: yellow;\r\n}\r\n<\/pre>\n
\"Ejemplo<\/p>\n
Tal y como se ha podido observar, la propiedad CSS grid-area<\/em><\/strong> es una abreviatura de las propiedades grid-row<\/em><\/strong> y grid-column<\/em><\/strong>. Y de forma similar, grid-row<\/em><\/strong> es una abreviatura de grid-row-start<\/em><\/strong> y grid-row-end<\/em><\/strong>. Y lo mismo sucede con grid-column<\/em><\/strong> que es una abreviatura de grid-column-start<\/em><\/strong> y grid-column-end<\/em><\/strong>.<\/p>\n
Tambi\u00e9n existe otra abreviatura para indicar la rejilla en el elemento padre.<\/p>\n
\r\n#grid {\r\n  display: grid; \/* CSS Grid Layout *\/\r\n  \/* grid-template es una abreviatura de\r\n  grid-template-columns y grid-template-rows *\/\r\n  grid-template: 200px 200px 200px \/ 200px 200px 200px; \/* filas \/ columnas *\/\r\n}\r\n<\/pre>\n
Nombres de l\u00edneas<\/h2>\n
En lugar de trabajar con n\u00fameros, existe la posibilidad de darle nombre a las l\u00edneas del Grid<\/strong>. Para ello simplemente debemos de indicar el nombre entre los tama\u00f1os cuando definimos la rejilla.<\/p>\n
\r\n#grid {\r\n  display: grid; \/* CSS Grid Layout *\/\r\n  grid-template-rows: [primera] 200px [dos] 200px [tres] 200px [ultima];\r\n  grid-template-columns: [first] 200px [second] 200px [third] 200px [last];\r\n}\r\n<\/pre>\n
(Nota: podemos darle m\u00e1s de un nombre a una misma l\u00ednea usando un espacio para separarlos [nombre1 nombre2].)<\/em><\/p>\n
Despu\u00e9s, simplemente en lugar de indicar los n\u00fameros hay que indicar los nombres.<\/p>\n
\r\n#p4 {\r\n  grid-area: dos \/ first \/ ultima \/ second;\r\n  background: yellow;\r\n}\r\n<\/pre>\n
Separaci\u00f3n entre celdas<\/h2>\n
Es posible indicar una separaci\u00f3n entre las celdas del Grid<\/strong> mediante el atributo CSS grid-gap<\/em> <\/strong>(que es una abreviatura de grid-row-gap<\/em><\/strong> y grid-column-gap<\/em><\/strong>).<\/p>\n
\r\n#grid {\r\n  display: grid; \/* CSS Grid Layout *\/\r\n  grid-template: 200px 200px 200px \/ 200px 200px 200px;\r\n  grid-gap: 10px 20px; \/* separaci\u00f3n entre filas y columnas *\/\r\n  \/* NOTA: si indicamos un solo valor se aplicar\u00e1 el mismo valor\r\n  tanto a las filas como a las columnas *\/\r\n}\r\n<\/pre>\n
\"Ejemplo<\/p>\n
Tama\u00f1o de la rejilla del Grid<\/h2>\n
En el ejemplo anterior simplemente hemos usado pixeles para definir el tama\u00f1o de las filas y las columnas, pero adem\u00e1s de otras unidades similares como em<\/strong> o rem<\/strong>, o el uso de porcentajes con %<\/strong>, tenemos tambi\u00e9n las siguientes alternativas:<\/p>\n