🔳 Utilidades de Grid en Tailwind CSS

🔹 grid-template-columns

Clase CSS Ejemplo
grid-cols-2 grid-template-columns: repeat(2, minmax(0, 1fr));
1
2
grid-cols-4 grid-template-columns: repeat(4, minmax(0, 1fr));
A
B
C
D
grid-cols-none grid-template-columns: none;
Sin columnas
grid-cols-[200px_1fr] grid-template-columns: 200px 1fr;
200px
Flexible

🔹 grid-template-rows

Clase CSS Ejemplo
grid-rows-3 grid-template-rows: repeat(3, minmax(0, 1fr));
1
2
3
grid-rows-[50px_auto] grid-template-rows: 50px auto;
50px
auto

🔹 col-span / row-span

Clase CSS Ejemplo
col-span-3
row-span-3
col-span-2
row-span-2		 grid-column: span 3 / span 3;
grid-row: span 3 / span 3;
grid-column: span 3 / span 3;
grid-row: span 3 / span 3;
A. Ocupa 3 columnas
B
C
D
E
F. Ocupa 3 filas
G
H. Ocupa 2 filas y 2 columnas
I

🔹 gap / gap-x / gap-y

🧠 Las clases gap controlan el espacio entre filas y columnas. Puedes usar variantes horizontales (gap-x-*) y verticales (gap-y-*), o personalizar el valor.

Clase CSS Ejemplo
gap-2 gap: 0.5rem;
A. Ocupa 3 columnas
B
C
D
E
F. Ocupa 3 filas
G
H. Ocupa 2 filas y 2 columnas
I
gap-x-4 gap-y-1 column-gap: 1rem;
row-gap: 0.25rem;
A. Ocupa 3 columnas
B
C
D
E
F. Ocupa 3 filas
G
H. Ocupa 2 filas y 2 columnas
I
gap-[1.5rem] gap: 1.5rem;
A. Ocupa 3 columnas
B
C
D
E
F. Ocupa 3 filas
G
H. Ocupa 2 filas y 2 columnas
I

🔹 col-start / col-end / row-start / row-end

Clase CSS Ejemplo
col-start-2 col-end-5 grid-column: 2 / 5;
2 a 5
col-start-[1] col-end-[span_2] grid-column: 1 / span 2;
Custom
col-start-[4] col-end-[span_2] grid-column: 4 / span 2;
Custom
row-start-2 row-end-4 grid-row: 2 / 4;
Fila 2-4
row-start-[1] row-end-[span_3] grid-row: 1 / span 3;
Custom

🔹 grid-flow-*

Clase CSS Ejemplo
grid-flow-row grid-auto-flow: row;
A. Ocupa 3 columnas
B
C
D
E
F. Ocupa 3 filas
G
H. Ocupa 2 filas y 2 columnas
I
J. Ocupa 2 filas
K. Ocupa 3 columnas
L
M. Ocupa 2 filas
N
O
P. Ocupa 2 filas
Q. Ocupa 2 filas
R
grid-flow-col grid-auto-flow: column;
A. Ocupa 3 columnas
B
C
D
E
F. Ocupa 3 filas
G
H. Ocupa 2 filas y 2 columnas
I
J. Ocupa 2 filas
K. Ocupa 3 columnas
L
M. Ocupa 2 filas
N
O
P. Ocupa 2 filas
Q. Ocupa 2 filas
R
grid-flow-dense grid-auto-flow: dense;
A. Ocupa 3 columnas
B
C
D
E
F. Ocupa 3 filas
G
H. Ocupa 2 filas y 2 columnas
I
J. Ocupa 2 filas
K. Ocupa 3 columnas
L
M. Ocupa 2 filas
N
O
P. Ocupa 2 filas
Q. Ocupa 2 filas
R
grid-flow-row-dense grid-auto-flow: row dense;
A. Ocupa 3 columnas
B
C
D
E
F. Ocupa 3 filas
G
H. Ocupa 2 filas y 2 columnas
I
J. Ocupa 2 filas
K. Ocupa 3 columnas
L
M. Ocupa 2 filas
N
O
P. Ocupa 2 filas
Q. Ocupa 2 filas
R
grid-flow-col-dense grid-auto-flow: column dense;
A. Ocupa 3 columnas
B
C
D
E
F. Ocupa 3 filas
G
H. Ocupa 2 filas y 2 columnas
I
J. Ocupa 2 filas
K. Ocupa 3 columnas
L
M. Ocupa 2 filas
N
O
P. Ocupa 2 filas
Q. Ocupa 2 filas
R