GRID item


Vamos a modificar con grid-column la primera grilla con color rojo y vamos a decir que ocupe de la linea 1 a la 3 en espacio que serian dos cajas. CON SHORT-HAND


1
2
3
4
5
6
7
8
9

Ahora vamos a modificar las dos filas con grid-row.


1
2
3
4
5
6
7
8
9

Ahora vamos a modificar las dos filas y dos columnas.


1
2
3
4
5
6
7
8
9

Ahora vamos a modificar otra grilla.


1
2
3
4
5
6
7
8
9

Ahora vamos a modificarla promera grilla sin shorthnad.


Sin Shorthand

Este seria igual al metodo anterior de grid row: 1/3 y column: 1/3 pero SIN SHORTHAND.


1
2
3
4
5
6
7
8
9

Con span

El span en es utilizado para que las grillas se acomoden y no generen conflicto por ejemplo .

grid-column: 1 / span 2;
grid-row: 1 / span 2;


1
2
3
4
5
6
7
8
9

Con span

El span en es utilizado para que las grillas se acomoden y no generen conflicto por ejemplo .

grid-column: 3 / span 2;
grid-row: 1 / span 2;


1
2
3
4
5
6
7
8
9

Sin span en column

Al no utilizar span las grillas no se acomodan correctamente.

grid-column: 3 / 2;
grid-row: 1 / span 2;


1
2
3
4
5
6
7
8
9

Repeat(Cantidad, Tamaño/s)

Es un atributo utilizado en el grid-container.

grid-template-rows: 150px 150px 150px;
grid-template-columns: 1fr 1fr 1fr 1fr;

Seria cambiado por:

grid-template-rows: repeat(3, 150px);
grid-template-columns: repeat (4, 1fr);


1
2
3
4
5
6
7
8
9
10
11
12