GRID IMPLICITO Y EXPLICITO


Cuando trabajamos con CSS Grid, es posible definir la grilla de dos maneras: explícita e implícita.
Cada vez que nosotros definimos la cantidad de columnas o filas que tendrá la grilla, sin importar que tamaño tengan, estamos definiendo el grid de manera explícita, como en el ejemplo que puedes ver a continuación donde definimos que la grilla tendrá 12 columnas que se dividen el espacio equitativamente:

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

Suponiendo que colocamos más de 12 elementos de la grilla, superando la cantidad de columnas establecidas. En dicho escenario, se creará una nueva fila para colocar los elementos que no cupieron en la primera fila. Esta segunda fila no fue definida explícitamente, por lo que se considera parte del grid implícito.

Dentro de las 3 nuevas propiedades del grid implicito tenemos:
grid-auto-rows:(igual que el templete)
grid-auto-columns(igual que el templete)
grid-auto-flow Row(Default), Column y Dense


Grid explicito

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

Grid implicito con row

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19 rows
20 rows
21 rows

Grid implicito con columns

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19 columns
20 columns
21 columns

Imagen sin atributo dense


grid-auto-flow: dense

La propiedad grid-auto-flow: dense nos permite rellenar los espacios

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

Grid dinamico

El grid dinamico trabaja con estructuras como:

Cantidad:

max-content

Quiere decir que el contenido que se encuentra en la caja (3) ocupara todo el reglon sin bajarse el texto (por lo general el max content no es muy utilizado a diferencia de su contraparte el min-content.


1
2
3 Lorem ipsum dolor sit amet, consectetur .
4
5
6
7
8
9

min-content

Quiere decir que el contenido que se encuentra en la caja (3) ocupara el minimo espacio posible.


1
2
3 Lorem ipsum dolor sit amet, consectetur .
4
5
6
7
8
9

minmax()

min-content para que utilice el minimo espacio posible en el texto y para que establezca un maximo de 300px en las cajas.
grid-template-columns:repeat(3, minmax(min-content, 200px));

(Nota lo podemos reducir e incrementar).

1
2
3 Lorem ipsum dolor sit amet, consectetur .
4
5
6
7
8
9

Cantidades: auto-fill y auto-fit

auto-fill

auto-fill es utilizado para que se ajusten los espacios y sigan generando espacios a medida que crezca la pagina.

1
2
3 Lorem ipsum dolor sit amet.

autofit

A diferencia de auto-fill este utiliza el espacio disponible y no sigue generando.

1
2
3 Lorem ipsum dolor sit amet.