Css grid Layout

Ivan Martil

Es necesario ver este artículo en un navegador que soporte grid. Para entender y ver correctamente los ejemplos la resolución de pantalla debe ser mayor de 1000px. Deja el móvil, enciende el pc ;).

Grid es una pequeña revolución en css. La facilidad para distribuir elementos y la rápida adaptación que está teniendo entre los navegadores facilitará y mucho el trabajo en maquetación.

La web está llena de guías y recursos para aprender grid. Yo no aporto nada nuevo, pero escribir este tipo de artículos me facilita el aprendizaje. En cada propiedad tenéis un ejemplo de uso. Podéis inspeccionar el código para verlo más en detalle. Al final del artículo tenéis una serie de enlaces de interés para leer más sobre grid layout.

Propiedades para el grid contenedor

Creamos el grid con display:grid;

grid es un elemento de bloque mientras que inline-grid equivale a un inline-block.

display:grid;

1

2

3

4

5

6

7

8

9

10

11

display:inline-grid;

1

2

3

4

5

6

7

8

9

10

11

1

2

3

4

5

6

7

8

9

10

11

grid-template-columns | grid-template-rows

Una de las novedades que vienen con grid es la aparición de una nueva unidad de medida.

El “fr”
El fr es el espacio libre disponible. Así pues, si asignamos a tres columnas el tamaño 1fr estas se reparten el espacio libre por igual. Pero si tenemos dos columnas con valor 1fr y una con 2fr esta última obtiene el doble de espacio disponible que las dos primeras.

Con grid-template-columns y grid-template-rows se definen las columnas y las filas del grid. Podemos definir solo el tamaño (con medidas tanto relativas como absolutas) o definir el tamaño asociándolo a un nombre. Este nombre lo podremos usar posteriormente para posicionar los items.

En el ejemplo inferior vemos un grid con dos filas y tres columnas. Cada linea roja y negra equivale a un “track”. Las celdas son los espacios en blanco que encontramos entre tracks. Por defecto grid tiene numerados implícitamente los tracks. En el ejemplo tenemos tres tracks horizontales y cuatro verticales. Nosotros mediante grid-template-columns y grid-template-rows podemos asignar un nombre a cada track utilizando los corchetes “[linea-uno]”.


.container{
	display: grid;

	grid-template-columns: [col-inicio]150px [col-dos]150px [col-tres]150px [col-fin];
	grid-template-rows:[linea-uno] 100px [linea-dos] 100px [linea-tres];

	/*columnas y filas sin nombres explícitos*/
	grid-template-columns:150px 150px 150px;
	grid-template-rows: repeat(2, 100px);
}

code 1

Las cuatro declaraciones en code 1 son perfectamente válidas. Para entender el motivo de asignar un nombre a cada track tenemos que avanzar algunas propiedades de los elementos internos del grid ( llamémosles items ).

grid-row-start y grid-row-end
Definen desde que track empieza y acaba el item en el eje horizon
grid-column-start y grid-column-end
Definen desde que track empieza y acaba el item en el eje vertical
grid-row y grid-column
Son shorthands de grid-row-start | grid-row-end y grid-column-start | grid-column-end respectivamente.

Ya veremos con detalle cada propiedad. Pero viendo el código (code 2) podemos entender el funcionamiento de los tracks. En grid existe mas de un modo de posicionar los items, este es uno de ellos.


.container{
	display: grid;
	grid-template-rows:[linea-uno] 100px [linea-dos] 100px [linea-tres];
	grid-template-columns: [col-inicio]150px [col-dos]150px [col-tres]150px [col-fin];
}

/*Utilizando los nombres asignados a los tracks */
.container__item-red{
	grid-row-start: linea-dos;
	grid-row-end: linea-tres;
	grid-column-start: col-tres;
	grid-column-end: col-fin;
}
/*Utilizando los nombres implícitos de los tracks */
.container__item-red{
	grid-row-start: 2;
	grid-row-end: 3;
	grid-column-start: 3;
	grid-column-end: 4;
}

/*Utilizando el shorthand con mobres asignados*/
.container__item-red{
	grid-row: linea-dos / linea-tres;
	grid-column: col-tres / col-fin;
}
/*Utilizando el shorthand con nombres implícitos*/
.container__item-red{
	grid-row: 2 / 3;
	grid-column: 3 / 4;

}

code 2

Podemos utilizar tanto los tracks implícitos como crear nuestro propio nombre, así como utilizar o no los shorthands. Combinando el grid-template-rows | grid-template-column con grid-row | grid-column ( o sus versiones específicas) podemos posicionar los items de forma similar al funcionamiento de flexbox con con la propiedad “order”.

Ejemplo donde reposicionamos la celda roja 1

1

2

3

4

5

6

También podemos decidir cuantas celdas ocupará cada item.

Ejemplo donde se redimensiona la celda naranja 2

1

2

3

4

5

6

Para definir el tamaño de las filas o columnas podemos usar tanto medidas absolutas como relativas. Una de las palabras clave para no repetir código es repeat()

repeat()

Es un keyword para escribir de manera más compacta cuando tenemos múltiples filas y columnas.


	.container{
		grid-template-columns: repeat(3, 20px) 100px;
	}

code 3

El selector en code 3 repite el tamaño de 20px para tres columnas y añade una cuarta de 100px.

auto-fill y auto-fit

Genera tantas columnas como quepan dentro del contenedor.


grid-template-columns: repeat(auto-fill, 100px);
grid-template-columns: repeat(auto-fit, 100px);

code 4

En code 4 podemos ver dos declaraciones. Ambas declaraciones crean tantas columnas de 100px como sea posible. No ponemos el número de columnas. Si el contenedor fuera de 1000px serían 10 columnas.

auto-fill

1

2

3

4

5

6

7

8

auto-fit

1

2

3

4

5

6

7

8

En un primer momento parece que no existen diferencias entre los ejemplos con auto-fill y auto-fit. Las diferencias se aprecian al usar otro de los keywords:

minmax()

Con minmax podemos asignar un tamaño mínimo y uno máximo a cada columna o fila.


	grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
	grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));

code 5

Con estas declaraciones (code 5) creamos tantas columnas como quepan dentro del grid con un tamaño mínimo de 100px y máximo de 1fr ( Recordar que fr reparte el espacio sobrante).

auto-fill

1

2

3

4

5

6

7

8

auto-fit

1

2

3

4

5

6

7

8

Ahora si vemos la diferencia entre auto-fill y auto-fit ( Para apreciar las diferencias en el ejemplo necesitamos verlo con más de 1000px de ancho ). auto-fill genera las columnas y no utiliza el resto del espacio sobrante. Si no puede crear más columnas se detiene. Mientras que auto-fit utiliza todo el ancho del grid. Genera las columnas y entiende que hay espacio disponible. Por lo tanto reparte el espacio entre las columnas hasta rellenar el espacio total del grid.

grid-template–areas

Antes hemos visto como posicionar elementos con grid-template-rows | grid-template-columns y grid-row | grid-column . El otro método disponible es grid-template-areas. Con el definimos las áreas del grid. Creamos una rejilla con columnas y filas y con grid-area asignamos a cada item del grid un nombre.


grid-template-areas:
                    "header header header"
                    "sidebar-left main sidebar-right"
                    "footer   footer ." ;
/*un punto "." equivale a decir que una zona esta vacia*/

code 6

En esta declaración creamos tres columnas y tres filas. Header ocupará una fila, la segunda fila es para sidebar-left main y sidebar-right. La tercera fila es para footer, pero no ocupará todo la fila ya que el “.” representa una celda vacía. Ahora habría que darle tamaño a las filas y columnas con las propiedades grid-template-columns y grid-template-rows.

header

sidebar-left

main

sidebar-right

footer

Hay que recordar que esto solo funciona si los items tiene su zona asignada con grid-area. Hasta ahora hemos creado los nombres de las areas y colocado estos en la posición que queremos. Nos falta decirle a cada item cual es su nombre.


.header{
	grid-area: header;
}

.sidebar-left{
    grid-area: sidebar-left;
}

.sidebar-right{
    grid-area: sidebar-right;
}

.main{
    grid-area: main;
}

.footer{
    grid-area: footer;
}

code 7

Es tan sencillo como vemos en code 7. Tenemos que asignarle el area a cada elemento y estos se posición solos.

grid-template

Es un shorthand de grid-template-columns + grid-template-rows + grid-template-areas.


grid-template:"a a" 50px
              "b c" 100px
              "d d" 50px
              / 50px 200px;

/*equivale a las tres declaraciones juntas*/
grid-template-rows: 50px 100px 50px;
grid-template-columns: 50px 200px;
grid-template-areas: "a a"
                     "b c"
                     "d d";


code 8

a

b

c

d

En este ejemplo creamos un grid de tres filas y dos columnas. La barra inclinada “/” separa las propiedades de las filas y las columnas. El nombre de la areas esta entrecomillado “a a”.

grid-column-gap | grid-row-gap | grid-gap

Determina el tamaño de las lineas del grid. Un equivalente es el “gutter” de photoshop para dejar un espacio entre columnas o filas.


.grid{
	grid-row-gap: 15px; /*espaciado para las filas*/
	grid-column-gap: 5px; /*espaciado en columnas*/

	grid-gap: 15px 5px; /*shorthand primer valor filas segundo columnas*/
}

>code 9

1

2

3

4

5

6

7

8

9

10

justify-items | align-items

justify-items
Alinea el interior de los items del grid en el eje horizontal ( eje x). Soporta los valores [start | end | center | stretch] por defecto el valor es stretch

.grid{
	justify-items: center;
	align-items: center;
	/*Centra los items en el eje vertical y horizontal*/
}

code 10

Stretch

2

3

4

Start

2

3

4

Center

2

3

4

End

2

3

4

align-items
Alinea el interior de los items del grid en el eje vertical (eje y). Soporta los valores [start | end | center | stretch] por defecto el valor es stretch

Stretch

2

3

4

Start

2

3

4

Center

2

3

4

End

2

3

4

justify-content | align-content

Mientras que justify-items y align-items alinean el interior del grid, justify-content y align content alinean al propio grid dentro del contenedor.

justify-content

start :
Alinea el grid con el inicio del contenedor.

start

2

3

4

5

6

7

8

9

center :
Centra el grid en el contenedor.

center

2

3

4

5

6

7

8

9

end :
Alinea el grid al final del contenedor.

end

2

3

4

5

6

7

8

9

stretch :
Amplia los elementos del grid para que ocupen todo el espacio del contenedor.

stretch

2

3

4

5

6

7

8

9

space-around :
Reparte el espacio del contenedor entre las columnas por igual. Realmente no poseen todas el mismo espacio libre, ya que la primera y la última columna no tienen una de las columnas a su lado y dejan de sumar ese espacio libre.

space-around

2

3

4

5

6

7

8

9

space-between :
Alinea la primera columna con el inicio del grid y la última columna con el final del grid. El resto de columnas se reparten el espacio por igual.

space-between

2

3

4

5

6

7

8

9

space-evenly :
A diferencia de space-around con space-evenly si conseguimos repartir el espacio por igual entre todas las columnas. Incluyendo tanto la primera como la última.

space-evenly

2

3

4

5

6

7

8

9

align-content

Igual que justify content pero en el eje vertical en lugar del horizontal.

start :
Alinea el grid con la parte superior del contenedor. (top)

start

2

3

4

5

6

7

8

9

center :
Alinea el grid en el centro del contenedor

center

2

3

4

5

6

7

8

9

end :
Alinea el grid en la parte inferior del contenedor (bottom)

end

2

3

4

5

6

7

8

9

stretch :
Redimensiona los items del grid para ocupar todo el espacio del contenedor.

stretch

2

3

4

5

6

7

8

9

space-around :
Como en justify-content. Reparte el espacio por igual entre las filas pero la primera y la ultima al no tener una de las filas a su lado obtiene menos espacio.

space-around

2

3

4

5

6

7

8

9

space-between :
Alinea la primera fila en “top” y la última en “bottom”. el resto se reparten el espacio por igual.

space-between

2

3

4

5

6

7

8

9

space-evenly :
El espacio libre se reparte por igual en todas las filas. Independientemente de su posición.

space-evenly

2

3

4

5

6

7

8

9

grid-auto-columns | grid-auto-rows

Especifican el tamaño de las columnas y de las filas generadas en el grid de manera implícita.

El concepto de grid implícito parece algo difuso. En el caso de las filas y las columnas entendemos por implícitas todas aquellas filas o columnas que no están declaradas en el grid. Mientras que explícitas significa que las hemos declarado.

.grid {
    grid-template-rows:70px;
    grid-template-columns: 100px 100px;

    grid-auto-rows: 140px;
}


code 11

En la regla superior estamos declarando de manera explícita una fila y dos columnas.

En el ejemplo inferior vemos como tenemos dos filas en lugar de una. La causa es que tenemos cuatro items dentro del grid y estos no pueden desaparecer. Como resultado genera una fila implícita para ubicarlos. Si nos fijamos en la regla anterior habíamos declarado grid-auto-rows: 140px;, por eso la fila implícita mide 140px.

1

2

3

4

Otra situación en la que nos encontramos con items implícitos dentro del grid es al posicionar uno de los items fuera del grid explícito.


.grid {
    grid-template-rows: 70px 70px;
    grid-template-columns: 100px 100px;

    grid-auto-columns: 140px;
}
/*Posicionamos el item*/
.grid__item-1 {
    grid-column: 3/4;
}

code 12

Al posicionar el item 1 entre el tercer y cuarto “track” generamos una columna implícita porque no hemos declarado esa tercera columna.

1

2

3

4

gird-auto-flow

Con auto-flow podemos ordernar el flujo natural de los items. Admite los valores row | column | row dense | column dense. El valor por defecto es row que acomoda los items de izquierda a derecha.

1 row

2

3

4

5

6

7

8

9

10

11

1 column

2

3

4

5

6

7

8

9

10

11

1 row dense

2

3

4

5

6

7

8

9

10

11

1 column dense

2

3

4

5

6

7

8

9

10

11

Los valores row dense y column dense reparten los items evitando en todo lo posible los espacios en blanco. Aunque tengan que alterar el orden natural de los items.

Grid

Es un shorthand que unifica:

  • grid-template-rows
  • grid-template-columns
  • grid-template-areas
  • grid-auto-rows
  • grid-auto-columns
  • grid-auto-flow
  • grid-column-gap
  • grid-row-gap


.grid {
    grid: auto-flow 1fr / 100px;
}

/*Misma regla sin utilizar el shorthand*/
.grid {
     grid-template: none / 100px;
     grid-auto-flow: row;
     grid-auto-rows: 1fr;
     grid-auto-columns: auto;
     grid-gap: 0;
}

code 13

No entro mucho a detallar el shorthand. No me gusta, aglutina demasiadas propiedades y sobretodo en los inicios cuando no tengo por mano todas las caracteristicas de grid me resulta más un estorbo que una ayuda.

Propiedades para los elementos internos del grid

grid-row-start | grid-row-end | grid-column-start | grid-column-end

Podemos determinar el inicio y el final de cada celda y asignar de este modo el espacio que ocupará cada item.


	.grid {
		display: grid;
		grid-template-columns: repeat(3, 100px);
		grid-template-rows: repeat(4, 70px);
		grid-auto-rows: 70px;
		grid-auto-columns: 100px;
		justify-content: center;
		align-content: center;
		grid-gap: 10px 5px;
		height: 500px;
		margin: 2em;
	}

	.grid .grid__item-1 {
		grid-row-start: 1;
		grid-row-end: 4;
	}



code 14

La regla anterior (code 14) da como resultado una celda que ocupa tres filas. Ya habíamos visto en grid-template-rows | grid-template-columns el significado de los tracks en grid. En esta ocasión estamos utilizando la nomenclatura implícita de los tracks para decirle a la celda 1 que empiece en el track 1 y termine en el track 4 de las filas.

Recordar que para utilizar tracks explícitos deberíamos crearlos con grid-template-rows | grid-template-columns. De este modo podemos utilizar nuestra propia nomenclatura.


.grid {
    grid-template-rows: [r-inicio]70px [r-dos]70px [r-tres]70px [r-cuatro]70px [r-fin];
    grid-template-columns: [c-inicio]100px [c-dos]100px [c-tres]100px [c-fin];
}
/*Tracks implícitos*/
.grid .grid__item-1 {
    grid-row-start: 1;
    grid-row-end: 4;
}
/*Tracks explícitos*/
.grid .grid__item-1 {
    grid-row-start: r-inicio;
    grid-row-end: r-cuatro;
}


code 15

1

2

3

4

5

6

7

8

9

10

11

Otro modo de posicionar un item de grid es con la palabra reservada span. Utilizando ahora grid-column-start y grid-column-end veamos un ejemplo.


/*Regla aplicada en el ejemplo*/
.grid .grid__item-1 {
    grid-column-start: 1;
    grid-column-end: span 3;
}
/*Utilizando los tracks implícitos*/
.grid .grid__item-1 {
    grid-column-start: 1;
    grid-column-end: 4;
}
/*Utilizando los tracks explícitos*/
.grid .grid__item-1 {
    grid-column-start: c-inicio;
    grid-column-end: c-fin;
}

code 16

1

2

3

4

5

6

7

8

9

10

11

Con span le decimos al item cuantas celdas debe ocupar.

Una de las características de esta propiedad es que admite valores negativos. Y row-start o colunmn-start no tienen que ser necesariamente el principio de la celda. Con este pequeño juego se entiende bastante bien el funcionamiento.

grid-column | grid-row

grid-column
Es un shorthand de grid-column-start y grid-column-end
grid-row
Es un shorthand de grid-row-start y grid-row-end

.grid .grid__item-2 {
    grid-column: 1 / 4;
    grid-row: 1 / 3;
}
/*shorthand utilizando track explícito*/
.grid .grid__item-2 {
    grid-column: c-inicio / c-fin;
    grid-row: r-inicio / r-tres;
}
/*shorthand con span*/
.grid .grid__item-2 {
    grid-column: c-inicio / span 3;
    grid-row: r-inicio / span 2;
}

code 17

1

2

3

4

5

6

7

8

9

10

11

El prmier valor corresponde a las versiones “start” y el segundo a “end”. Podemos utilizar tanto span como valores negativos.

Si posicionamos los items unos encima de otros podemos utilizar z-index para ordenarlos en el eje z.

1

z-index 3

3

z-index 2

5

z-index 1

7

8

9

10

11

grid-area

En grid-template-areas introducimos el concepto de grid-area.

Con grid-area posicionamos los elemntos con los nombres creados en el grid-tamplate-areas.


.grid {
  display:grid;
  grid-template-areas:
                      "header header header"
                      "sidebar-left main main"
                      "footer footer footer";
}

.grid .grid__header {
  grid-area: header;
}

.grid .grid__sidebar {
  grid-area: sidebar-left;
}

.grid .grid__main   {
  grid-area: main;
}

.grid .grid__footer {
  grid-area: footer;
}

code 18

header

sidebar-left

main

footer

Otro de los usos de grid-area es como shorthand:

grid-row-start + grid-column-start + grid-row-end + grid-column-end

Con el podemos posicionar el item del mismo modo que hacíamos con las propiedades estándar.


  .grid {
        display: grid;
        grid-template-columns: [c-inicio]100px [c-dos]100px [c-fin];
        grid-template-rows: [r-inicio]70px [r-dos]70px [r-fin];
  }
  
  .grid .grid__item-1 {
        grid-area: 2 / 2 / 2 / 2;
  
  /*Las tres declaraciones son correctas*/
        grid-area: r-dos / c-dos / r-fin/ c-fin;
        grid-area: r-dos / c-dos / span 1/ span 1;
  }

code 19

1

2

3

4

Tanto tracks implícitos como explícitos y span son válidos

justify-self

Alinear el contenido del item en el eje de las columnas. Los valores admitidos son:

start | end | center | stretch (por defecto)

start

end

center

stretch

5

6

align-self

Alinear el contenido del item en el eje de las filas. Los valores son:

start | end | center | stretch (por defecto)

start

end

center

stretch

5

6

Recursos Grid Layout

Comentarios 0

Nadie ha comentado nada aún. Te animas ha ser el primero!! ;)

Opina libremente

Tu dirección de correo electrónico no será publicada.Todos los campos son obligatorios.