Notas rápidas de Grid
Tags: spanish, css3, grid
Published: 2023-02-26 20:43:15

## :checkered_flag:  Tabla de contenido  :checkered_flag:

- [Idea del post](#idea-del-post)
- [Contexto](#contexto)
- [Grid container](#grid-container)
  * [Flujo de display grid](#flujo-de-display-grid)
  * [Tracks](#tracks)
    + [Propiedades para definir un track](#propiedades-para-definir-un-track)
      - [Valores para las columnas o filas implicitas](#valores-para-las-columnas-o-filas-implicitas)
      - [repeat como valor](#repeat-como-valor)
      - [patrones con repeat](#patrones-con-repeat)
      - [Unidad de medida](#unidad-de-medida)
      - [min content y max content](#min-content-y-max-content)
      - [fit content](#fit-content)
      - [minmax](#minmax)
      - [autofill](#autofill)
      - [AutoFit](#autofit)
    + [Alineacion de colums y rows](#alineacion-de-colums-y-rows)
      - [Justify items](#justify-items)
      - [Align items](#align-items)
      - [Justify content](#justify-content)
      - [Align content](#align-content)
- [Posicionamiento Grid item](#posicionamiento-grid-item)
  * [Grid column start y end](#grid-column-start-y-end)
  * [SPAN](#span)
  * [Numeros negativos](#numeros-negativos)
  * [Gutters o espaciadores](#gutters-o-espaciadores)
  * [DENESE](#denese)
  * [Grid area](#grid-area)
  * [Grid areas](#grid-areas)
  * [Lines Columns y Lines Rows](#lines-columns-y-lines-rows)
  * [Ordenamiento](#ordenamiento)
  * [Alineacion de un solo elemento en el axis](#alineacion-de-un-solo-elemento-en-el-axis)
- [Comandos resumen](#comandos-resumen)
  * [Grid container](#grid-container-1)
  * [Grid items](#grid-items)

## Idea del post 

Esta es una guía rápida de uso de CSS3 GRID con el objetivo que tengas en mano los pasos u anotaciones para usar Grid en tus proyectos 

Por último. Si te gusto este post déjame un :heart: 


## Contexto 

- __Grid container:__ Es un espacio bidimensional que trabaja con filas y columna

![grid container](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wzm0efw2a4maexsmosj3.png)

- __Grid items:__ Son los elementos hijos y perteneces a un grid container 

![grid items](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hqlgvts66wtyph96f2zm.png)

- __Grid cells:__ Es una cuadrícula compuesta de muchas celdas, al principio los grid-items ocupan una celda por cada grid-item


![grid cells ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ov10fp589wdtvyvjoa05.png)

Cada cuadrado pequeño conforma la grid y a este cuadrado pequeño se llama grid cell 


- __Grid lines:__ Las cuadriculas estan compuestas de lineas verticales y lineas horizontales conocidas como column grid lines y row grid lines 

![Grid lines 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/phteqksa6ynbtl7z3yvr.png)

veamos un grid de 3x3, es decir 3 filas y 3 columnas; Sin embargo, tiene 4 row grid lines y 4 columns grid line


![Grid lines 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t3fjhc5zew3pjatvewtk.png)

Cada columna o fila tendrá una línea de inicio y una línea de fin.
Siempre habrá una línea más que columnas o filas.

Estos conceptos son importantes porque con esto podemos posicionar elementos en la grid  


![Grid lines 3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w4r1vrve7bzxw4wgne7c.png)

Supongamos que lo azul es un elemento o una imagen o un contenedor. Para posicionarlo donde está debo saber las líneas y su numeración.

Por ejemplo, este elemento azul está posicionado en 
la row line de la 2 hasta la 4 y la column line de la 1 hasta la 3 


- __Grid track:__ Es el espacio entre dos grid lines adyacentes, también se las conoce como fila y columna 

![Track imagen 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ogyqor8zg54l8oes3kh3.png)


- __Grid areas:__ Es el área donde se posicionan varias celdas.
Un grid área puede estar formando por el número que sea de celdas, pero un grid área siempre debe ser rectangular o cuadrado

![grid area 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w9z77r76w1icneawbwkh.png)


## Grid container 

Para llamar a una grid se lo hace con `display: grid;`. El height por defecto de los elementos grid es auto.
Si se aplica display grid inmediatamente rellena los espacios equitativamente.

Antes de display grid 

![imagen grid 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/62vapwf1ycddpntspzz5.png)

Después de display grid 

![Imagen display grid 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zg9iqvxqq655f6yjpwty.png)

***
### Flujo de display grid 

El display grid por defecto es en fila, se lo puede referenciar con 

```
grid-auto-flow: row;
```

![Imagem display row](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o5jmv0zwrrnzatctf82q.png)

Si se desea cambiarlo en dirección de columna se lo puede referenciar con 

```
grid-auto-flow: column;
```

![Imagen grid column](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/irnehk0k7lkqfgcxfw26.png)


### Tracks

Los tracks son filas o columnas.


#### Propiedades para definir un track

- Definición de columnas:
Para definir una columna se hace de forma muy intuitiva. 
```
grid-template-columns: 100px 2cm 30%;
```
se puede usar cualquier tipo de medida 

![Imagen track 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9sn3hg62hapl56n1tm37.png)

En el html tenemos 6 ítems es por eso que se nos crea una __fila implícita o automática.__   


Para definir filas o rows usamos.

```
grid-template-rows: 20px 4cm  20%;
```

##### Valores para las columnas o filas implicitas 
Cuando creamos uns fila o una columna y hay mas items de los que hemos definido se crean columnas o filas implicitas, estas columnas y filas no estan definidad por lo tanto estan en `auto` y tienen el tamaño de su contenido, pero si queremos controlar ese valor automatico a las filas o columnas lo podemos hacer de la siguiente manera:

Tenemos este ejemplo. Tenemos la fila 4 creada implicitamente y como vemos esta en auto y s height esta derivado de su contenido


![Descripcion 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ch095yhac7djdhh2lapj.png)

Si usamos 
```
grid-auto-flow:row; --> direccion grid
grid-auto-rows: 200px;  
```
Le estamos dando un tamaño a las filas implicitas y de esta manera controlamos 


![Descripcion 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7vim29er6koyuq4sbw3h.png)

Si fuera en columna 

```
grid-auto-flow: column;
grid-auto-colums:200px;
```

![Descripcion 3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s3scndtwd9tdjfniqt52.png)



##### repeat como valor 
Podemos crear filas y columanas con repeat de la siguiente manera.
`grid-template-row: repeat(5, 20px)` De esta manera le decimos que cree 5 filas de 20px. Asi mimsmo podemos hacer con columnas.
`grid-template-column: repeat(5, 20)` De esta manera le decimos que cree 5 columnas de 20px.

##### patrones con repeat
Otra función que nos permite repeat es crear patrones de filas y columnas
 Para crear patrones de columnas podemos usar.
 `grid-template-columns: repeat(3, 10px, 20%);` Esto nos creará 3 
 columnas de 10px y 3 columnas de 20% pero intercalándolas. De la 
 misma manera podemos usar `gris-template-rows: repeat(3, 10%, 
 30px);` Esto nos creará 3 filas de 10% y 3 filas de 30px 
 intercalándolas   

##### Unidad de medida 
En grid puedes usar cualquier medida, pero se recomienda usar la medida de fracción o `fr` para que los grids sean felxibles Ejemplo.

`grid-template-colums: 1fr 1fr 1fr`. Lo que hace es dividir el espacio disponible en 3 fracciones.
En este ejemplo tenemos 6 elementos en un contenedor grid aplicando la creacion de 3 columnas de una 1fr equitativamente

![unidad de medida ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ci37ue4kuldtwy37724e.png)

##### min content y max content
 * __min-content:__ crea un track con el minimo de contenido posible, es decir su tamaño se definira en base a su minimo contenido posible, la columna crecera en base a la palabra mas grande o contenido mas grande

 * __max-content:__ Ocupa el mayor contenido posible, es decir el tamanio de la columna se dara al mayor contenido posible 

```
grid-template-columns: min-content max-content;
grid-template-rows: min-content max-content;
```
El azul es min-content, el rojo es max-content


![Min y max content](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ie68g2xvn0jsusnsi4gh.png)

__Nota:__ Esta propiedad se usa mas con columnas 


##### fit content
No spermite definir un tamaño maximo para una fila o columna. Ejemplo

Le decimos que el tamaño minimo o inicial de la columna va a ser el min-content (que es el tamaño minimo del contenido) y cuando llege a 200px se desborde

```
grid-template-colums: fit-content(200px);
```

##### minmax
Define el valor minimo o maximo de un track 

```
grid-template-column: minmax(valor_minimo, volormaximo);
grid-template-column: minmax(80px, 300px);
```
Vemos que se estira solo hasta los 300px

![minmax](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/plpdovzhqwx8ct7d71j0.png)

##### autofill
La definicion es autorelleno. En base a la medida del segundo parametro creara o rellenara cuanto elemento se pueda en el `grid-container`

```
grid-template-column: repeat(auto-fill, 10%)
```

Aunque tenga 4 items creara las columnas que permita el contendedor, cada columna de 10%

![autofill 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gj8o79cn9w8raagd9mzi.png)

Se puede usar con un valor fijo 

```
grid-template-column: repeat(auto-fill, 300px)
```
Calcula que el espacio del container solo entran dos columnas de 300 px

![autofill 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cfpsvytgjtnhuomc91bb.png)


Tambien se puede usar con minmax()

```
grid-template-column: repeat(auto-fill, minmax(valor_minimo, valor_maximo));
grid-template-column: repeat(auto-fill, minmax(200px, 1fr));
```
Con esta poropiedad creamos columnas dinamicamente 
	
Y si vemos con la viewport mas alto y  vamos encogiendo 
Autofill dice mientras este el espacio para crear mas columnas lo hara  y cuando llegue al valor minimo se desbordara hasta que llegue a una fraccion o 1fr

![autofil 3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r0fn994lxvcd0i3lgjrl.png)

![autofil 4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2vbw6p9uuvlgyevw3i2k.png)

![autofil 5](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e9m32k5ylsalflcg21pw.png)

![autofil 6](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/67fzz0vlzhgdvp9ov389.png)

![autofil 7](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u4zmhe7ek0pwr718bd02.png)

##### AutoFit
Fit significa ajustar, la diferencia con el autofill es que este valor no va a crear columnas o filas extras si hay espacio solo las que vamos a requerir 

```	
grid-template-column: repeat(auto-fit, minmax(valor_minimo, valor_maximo));	
grid-template-column: repeat(auto-filt, 10%);
```	
Solo las columnas de los items disponibles 

![autofit 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z3edqmnq3q4dfitrnw54.png)

#### Alineacion de colums y rows

##### Justify items
Nos permite alinear las filas y columnas axis
`grid-row`. Tiene las propiedades 
`stretch | start | end | center`. Ejemplo

Creamos una grid 
```
grid-template-column: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
```

![justify 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cs9b1dkhg5ou1uetevxg.png)

```
justify-items: start;
```

![justify 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y9lf7gl2x9yutnctmhzq.png)

```
justify-items: end;
```

![justify 3n](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f7asf560rpgpyxffivgz.png)

```
justify-items: center;
```

![justify 4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lfzkgadqlidh1uqbeg10.png)

##### Align items
Nos permite alinear las filas y columnas axis
`grid-colum`. Tiene las propiedades 
`stretch | start | end | center`. Ejemplo

```
align-items: start;
```

![align 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fwn32c84b3vcdd995tyc.png)

```
align-items: end;
```

![align 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eilncm5bvzxvzxb955ge.png)

```
align-items: center;
```

![align 3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9ck39ap5sz64rht91hzs.png)


__NOTA:__ El SHORTCUT para usar `justify-items` y `align-items` es:
```
place-items: valor_align-items valor_justify-items;
```

##### Justify content
Nos permite linear la grid del axis horizontal siempre y cuando la grid o cuadricula sea menor que el contenedor, esto quiere decir que hay espacio disponible. Ejemplo 

```
grid-template-columns: repeat(2, 150px);
grid-template-rows: repeat(2, 150px);
```
 
![justi con 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ayvappo4ztgzyqf6s0ta.png)

Como vemos en la imagen la grid es mas pequeña que el contenedor grid 

Las propiedades de Justify-content  
`start | end | Center | space-around | space-evenly | space-between`



##### Align content
Nos permite linear la grid del axis vertical siempre y cuando la grid o cuadricula sea menor que el contenedor, esto quiere decir que hay espacio disponible 

Las propiedades de Align-content 
`start | end | Center | space-around | space-evenly | space-between`

***
## Posicionamiento Grid item

Los grid-items se posicionan naturalmente en el orden del html y ocupan una celda. Para posicionar los items en grid debemos recordar que es un colum grid line y un row grid line. Cuando posicionamos un item debes decirle el inicio de la línea y el fin de la línea sea en row o column como un sistema de coordenadas 


### Grid column start y end 
Para posicionar el comienzo de un ítem en la línea de una columna usamos `grid-colum-start: ;` y para definir el final de la posición del ítem usamos `grid-column-end: ;` Ejemplo.


Queremos que un ítem comience en la línea de la columna 3.
`grid-column-start: 3;`.


![posicion 3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s6pe8hrbjc7nihrmn2ty.png)

si no se especifica la línea final, por defecto será la que le sigue, en este caso la línea colum 4

Si añadimos una columna mas 


![posicion 4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ky29xpjshuqrpadhj3do.png)

Ahora queremos que el ítem 1 comience en la línea de la columna 3 y termine en la 5.
```
grid-column-start: 3;
grid-column-end: 5;
```

![Posicion 5](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qmd9yi935dqhwtmt3yej.png)

Este comando también se usa con rows veamos el siguiente ejemplo.
Que la columna ocupen de la línea 3 a la 5 y en fila ocupen de 3 a 5 

```
grid-column-start: 3;
grid-column-end: 5;
grid-row-start: 3;
grid-row-end: 5;
```

Para los comandos anteriores tenemos atajos o shortcuts que son:
`grid-column: valor_start / valor_end;` y para filas.
`grid-row: valor_start / valor_end;` así que con el ejemplo anterior quedaría así 

```
grid-column: 3 / 5;
grid-row: 3 / 5;
```

![Posicion 6](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/werxe2xcuzqy2g5san1l.png)

Si en el shortcut ponemos solo un valor nos llevará el ítem a esa la línea start y tomará como valor end la siguiente línea. Ejemplo 

tenemos la siguiente grid 


![Posicion 7](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bs606wvn3t8pzkdmbzld.png)

sí ponemos `grid-row: 3;` al elemento 3 nos dará lo siguiente 
 

![Posicion 7](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s99shf39bpb1nel22our.png)

### SPAN
Sabemos que para posicionar un ítem necesitamos las coordenadas de las líneas de inicio y fin, span nos permite no definir la línea de fin, simplemente abarca la posición que se le ponga en span. Se usa:
```
grid-column: span valor
grid-row: span valor
```

tenemos la siguiente grid 


![Posicion 8](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h75ud8dy4degqlmkpm1e.png)

Por ejemplo, usamos en el ítem 3 `grid-column: span 2`. Con esto estamos diciendo que el ítem 3 abarque 2 líneas column mas de la que actualmente esta 


![Posicion 9](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rw59ivnfuzcnacwlhq39.png)

asi mismo podemos usar para las filas, por ejemplo.
`grid-row: span 3;`, Le estamos diciendo que abarque 3 líneas en row más de la que actualmente está.


![Posicion 10](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/infywc94zjbp9dsv8z9w.png)

también podemos usar la línea start + span 


![Posicion 11](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j6rly30trc8vg5q8nnkg.png)

de la imagen anterior queremos por ejemplo que el ítem 3 se posicione en la columna 2 y abarque 3 columnas o 3 line column.
Usariamos `grid-column: 2 / span 3`


![Posicion 12](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qfpqexmbu57rxiuhrdhy.png)

ahora que se posicione en la línea 1 en row y abarque 4 filas o 4 line row. Usariamos `grid-row: 1 / span 4`


![Posicion 13](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7f8i16wfh4z3v5olzc9m.png)

### Numeros negativos 
Para posicionar elementos o ítems también podemos usar números negativos, si vemos en alguna imagen anterior de las grids enumeradas podemos darnos cuenta de los números negativos. Estos referencian a la última posición de la grid. 


### Gutters o espaciadores 
Es una propiedad que nos permite dar un espacio entre filas `row-gap: ;` y columnas `column-gap: ;`.

Ejemplo creamos la siguiente grid 

```
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
``` 

![Posicion 16](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/git2sisf38eyua0ziptu.png)

```
column-gap: 20px;
row-gap: 20px;
```
o podriamos aplicar el shortcut `gap: 20px 20px` o simplemente `gap: 20px` que aplica tanto para filas y columnas 

![Posición 17](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pbf85cs58i781oue1l97.png)

### DENESE 
Al personalizar el area que ocuparan los items dejamos en la grid espacios vacios 


![Posicion 18](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/joya2x0sizbp4l3o0w41.png)

Esta propiedad nos permite llenar estos espacios vacions de la forma mas ordenada posible.

```
grid-auto-flow: dense;    ---> Para filas
grid-auto-flow: column dense;  ---> Para columnas
```

### Grid area 
Este es un shortcut para grid-column y grid-row y se define en el siguiente orden 
 1. La posición inicial de la fila 
 2. La posición inicial de la columna 
 3. La posición final de la fila
 4. La posición final de la columna 
 

![Posicion 14](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8zjyhh0j8i5vhkmdtksa.png)

```
grid-area: 2 / 2 / 3 / 5;
```

Posición inicial line row 2
Posición inicial line column 2
Posición final line row 3
Posición final line column 5


![Posicion 15](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3swca4krwfj4so5htxg5.png)

### Grid areas 
 * Es la propiedad que nos permite organizar elementos en base a areas
 * Las areas pueden ser de una celda minimo y a partir de ahi pueden ser cuadradas o rectangulares 
 * Nos permite nombrar areas en la grid, es decir ser mas especifico.
 * Define una palantilla refereciando nombres otorgados en la grid
 * Cada `" "` equivale una fila y dentro de las comillas van a ir los nombres de las columnas, estas columnas son implicitas al no definrlas se crean en automatico. Se la escirbe de la siguiente manera.


`grid-template-areas: "columna1 columna2 columna3"` 

Para manejar el tamaño de las columnas implicitas podemos usar:
```
grid-auto-columns: ;   --> columnas
gris-auto-rows: ;      --> filas 
``` 
Ejemplo. Supongamos que tenemos esta base


![Areas 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/87tx8ps7fxxdysm1je58.png)

```
/*  CREAMOS */

grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 10px;
```
![Areas 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hknbqpv6ymadh5mcn051.png)

Por ejemplo quiero que header ocupe de la line column 1 a la 4  y la line row de la 1 a la 3. Tambien queremos que main ocupe la line column 4 a la 6 u line row de 1 a la 3
```
grid-template-areas:
"header header header main main"
"header header header main main";
```

![Area 3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zl66zefjwh4pwa3u29po.png)

Supongamos que no queremos que las dos ultimas celdas de main que se encuentran en la segunda fila no esten nobradas o seleccionadas usamos:

```
grid-template-areas:
"header header header main main"
"header header header .    .   ";
```

![Area 4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gvcsmsi088af7ygwk2ec.png)

Ahora queremos un sidebar de la line column 1 hasta la 3 y line row de la 3 a la 4 y un footer de la line column de la 3 a la 6 y line row de la 3 a la 4 

```
grid-template-areas:
"header header header main main"
"header header header .    .   "
"sidebar sidebar footer footer footer";
```

![area 5](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a619fo2dvzx9munxcdgc.png)

Ahora queremos posicionar un elemento basta con usar.
`grid-area: nombre_area` Ejemplo 

Sabemos que tenemos en el anterior ejemplo nombradas las areas con el template  supongamos que queremos que html header opcupe el templete de header del area 

```
.header {
    background: crimson;
    grid-area: header; ->nombre del area en el template
}
```

![area 6](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yzqeutseuh90n6zv706x.png)

### Lines Columns y Lines Rows

A traves de las lines columns y lines rows es otra forma de posicionar los elementos. 
Al momento de crear las columnas y filas, tambien podemos darle un nombre especifico a las lineas de columnas y filas que estamos creando de la siguiente manera 
```
grid-template-columns: [linea-inicial] 1fr [linea-final] 1fr [linea-final-grid]; 
```

![Linwas 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o044zcex9jlf3f1vxcfd.png)

Los nombres de las lineas van en el orden de creacion 
1. Primero esta el nombre de la linea 
2. Segundo esta la primera columna
3. Tercero esta el nombre de la segunda linea 
4. Cuarto esta la segunda columna
5. Quinto esta el nombre de la ultima linea 

Es decir tenemos dos columnas pero tenemos 3 lines columns y se escriben en codigo en el orden de creacion de izquierda a derecha. 

La lineas pueden tener mas de un nombre como vemos a continuacion 

```
grid-template-columns: [linea-inicial] 1fr [linea-final linea-inicial2] 1fr [linea-final-grid];
```

![Linea 2 ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nmyoxdhotesojny42dkd.png)

Esta misma accion la podemos hacer con filas o rows con:
`grid-template-rows:  ;`

Asi que de esta manera podemos posicionar los items de la siguiente manera por ejemplo 

```
.item1{
   background: slateblue;
   grid-column: linea2 / linea4;
   grid-row: lnea-media/linea-final;
}
```

![Linea 3 ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8bh9kurokmo77qxjcv0n.png)


__NOTA:__ Habalando de mejores parcticas se recomienda las lineas de inicio y final de su elemento a posicionar y despues un sufijo relevante. Supongamos que en la siguiente imagen queremos posicionar el item2 como cabecera en al grid 


![Linea 4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f9r9ziwal2p64wc43f0l.png)

```
.item2{
   background: crimson;
   grid-area: cabecera;
}

Cabecera es el nombre que le dimos a las lineas
```

```
grid-template-columns: [cabecera-start] 1fr 1fr 1fr 1fr [cabecera-end];

grid-template-rows: [cabecera-start] 1fr 1fr 1fr [cabecera-end];
```


![Linea 5](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mgykv8z6avy311d9b0jz.png)

### Ordenamiento

Funciona igual que el order de flexbox mientras el valor sea mas alto los elementos se pondran al final 
Por defecto todos los grid-item tienen valor 0 

```
grid-template-columns: repeat(4, 1fr);
```

```
.grid__item1{
	Padding: 20px 0;
	Font-size: 2rem;
	Color: #ffff;
	Text-align: center;
	Order: 1;
}
```

![ordenmaiento](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nh8z076j7aso5wqtsld4.png)

### Alineacion de un solo elemento en el axis
 
Se declaran en elos grid-items


`Align-self: ;`
Cuando quieres alinear solo un elemento en el vertical 


`justify-self: ;`
Cuando quieres alinear solo un elemento en le eje horizontal 

	
__Shortcut__ 
`place-self: align justify;`


## Comandos resumen 

### Grid container

__GRID__

```
/* Direccion de grid en Horizontal o row*/
grid-auto-flow: row;

/*Direccion de fila en vertical o column */
grid-auto-flow: column;
```

__TRACK - COLUMNAS Y FILAS__

```
/* Crear filas */
grid-template-rows:

/* Crear columnas*/
grid-template-columns:
```
```
/* valores para crear columnas o filas con grid-template */

repeat(3, 1fr); | 3 columnas de 1 fracccion

min-content max-content; | tamaño minimo y maximo del contenido

fit-content(valor_maximo); | tamaño minimo del contenido y se desborde en el valor_maximo

minmax(valor_minimo valor_maximo); | tamaño minimo y maximo especifico

repeat(auto-fill, 10%); | Cree todas las columnas o filas de 10% que el tamaño del contenedor le permita 

repeat(auto-fit, 10%); | Cree las filas o columnas deacuerdo a los items existentes

```
Nombrar las lineas al momento de crear filas y columnas 

```
grid-template-columns: [linea-inicial] 1fr [linea-media] 1fr [linea-final];

Lo mismo aplica para rows 
```

__Grid areas__
Permite crar filas y columnas a traves de una especia de template o plantilla y al mismo tiempo las podemos nombrar.


Cada fila esta dentro de `""`, comillas y dentro de las comillas estan las columnas.

Este template tiene que ser uniforme y equilivrado las areas  pueden ser de 1 celda o mas simre y cuando sean de forma cuadrada o rectangulares.

Si quremos dejar vacio una celda remplazamos el valor por un `.`, punto

```
grid-template-areas:
" columna1 columna2 columna3 columna4 columna5"
" header   header   header   main     main    " 
" header   header   header   main     main    ";
```
Si queremos manejar el tamaño de las filas o columnas que fueron creadas en automatico 

```
grid-auto-columns: valor;
grid-auto-rows: valor;
```

__Alineacion para las columnas y filas__

```
/* En horizontal */
justify-items: strech | start | end | center;

/* En vertical */
align-items: strech | start | end | center;

/* shortcut */
place-items: valor_align valor_justify;
```
Cuando la grid sea mas pequeña que el tamaño del contenedor 

```
/* En horizontal */
justify-content: strech | start | end | center;

/* En vertical */
align-content: strech | start | end | center;
```

### Grid items

Posicion de grid-items con coordenadas atraves de lineas.
Si las lineas tienen nombre pueden ser llamadas con el mimso nombre

__Posicionamiento simple__

```
/* Posicionamiento en columnas*/
grid-column-start: linea_inicio;
grid-column-end: linea_fin;

/* Posicionamiento en filas*/
grid-row-start: linea_inicio
grid-row-end: linea-fin;

/* shortcut */
grid-column: linea_inicio / linea_fin;

grid-row: linea_inicio / linea_fin;
```

__SPAN Posicionamiento sin definir la linea final__

De la linea donde esta declarado el item se toma el numero de espacios de filos o columnas que este en span

```
grid-column: span2;
grid-row: 3 span 2
```

__Grid area__
 Posiciona un item o area por corrdenada de lineas

```
Patron en orden de lineas:
1. Posicion inicial fila: 2
2. Posicion inicial columna: 2
3. Posiion final fila:3
4. Posicion final columna: 5

entonces...

grid-area: 2 / 2 / 3 / 5 ;
```

__Gutters o espaciadores de filas  y columnas__

```
column-gap: valor
row-gap: valor

/* espaciado tanto para filas y columna*/
gap: valor
```

__Dense o relleno ordenado de items segun su direccion__

```
/* Fila*/
grid-auto-fow: dense; 

/* Columna*/
grid-auto-flow: column dense;
```

__Ordenamiento de items__

```
/* En el item se declara */

/* Por defecto en los items*/
order: 0;

/* Si el numero es menor va primero*/
order: -1;

/* Si el numero es mayor va al final */
order: 1;
```

__Alineacion de un solo grid-item__

```
/* Vertical */
align-self: strech | start | end | center;

/* Horizontal */
justify-self: strech | start | end | center;

/* shortcut */
place-self: valor_align-self  valor_justify-self;
```