En esta clase vamos a aprender a crear un grid de columnas utilizando flex en Tailwind.
Grid Básico
Verás que con lo que hemos aprendido hasta ahora es muy sencillo crear un grid.
Crearemos un elemento que contendrá las columnas de nuestro Grid con la clase de flex.
< div class = “flex” > ;
< / div >
Teniendo de base el elemento del punto anterior insertaremos una etiqueta por cada columna que queramos tener de la siguiente manera.
Una columna
< div class = "flex" >
< div
class = "w - full
p - 4 bg - blue - 800 "
> < / div >
< / div >
Resultado
Dos columnas
< div class = "flex" >
< div
class = "w - 1 / 2
p - 4 bg - blue - 800 "
> < / div >
< div
class = "w - 1 / 2
p - 4 bg - blue - 600 "
> < / div >
< / div >
Resultado
Tres Columnas
< div class = "flex" >
< div
class = "w - 1 / 3
p - 4 bg - blue - 800 "
> < / div >
< div
class = "w - 1 / 3
p - 4 bg - blue - 600 "
> < / div >
< div
class = "w - 1 / 3
p - 4 bg - blue - 500 "
> < / div >
< / div >
Resultado
Cuatro Columnas
< div class = "flex" >
< div
class = "w - 1 / 4
p - 4 bg - blue - 700 "
> < / div >
< div
class = "w - 1 / 4
p - 4 bg - blue - 400 "
> < / div >
< div
class = "w - 1 / 4
p - 4 bg - blue - 600 "
> < / div >
< div
class = "w - 1 / 4
p - 4 bg - blue - 500 "
> < / div >
< / div >
Cinco columnas
< div class = "flex" >
< div
class = "w - 1 / 5
p - 4 bg - blue - 700 "
> < / div >
< div
class = "w - 1 / 5
p - 4 bg - blue - 400 "
> < / div >
< div
class = "w - 1 / 5
p - 4 bg - blue - 600 "
> < / div >
< div
class = "w - 1 / 5
p - 4 bg - blue - 500 "
> < / div >
< div
class = "w - 1 / 5
p - 4 bg - blue - 800 "
> < / div >
< / div >
Resultado
Seis columnas
< div class = "flex" >
< div
class = "w - 1 / 6
p - 4 bg - blue - 700 "
> < / div >
< div
class = "w - 1 / 6
p - 4 bg - blue - 400 "
> < / div >
< diva
class = "w - 1 / 6
p - 4 bg - blue - 600 "
> < / div >
< div
class = "w - 1 / 6
p - 4 bg - blue - 500 "
> < / div >
< div
class = "w - 1 / 6
p - 4 bg - blue - 300 "
> < / div >
< div
class = "w - 1 / 6
p - 4 bg - blue - 800 "
> < / div >
< / div >
Resultado
Grid Responsivo con Columnas de Anchura Fija
La diferencia para lograr que nuestro grid sea responsivo es que al elemento base donde tenemos la clase de flex le agregamos flex-wrap con esto logramos que cuando uno de los elemento exceda el tamaño, ese elemento pase al siguiente renglón. Y con el uso de las pseudo-classes responsivas de sm, md, lg y xl logramos el numero de columnas deseada por tamaño de pantalla.
< div class = "flex flex-wrap m-4" >
< div
class = "w - full sm : w - 1 / 2 md : w - 1 / 3 lg : w - 1 / 4 xl : w - 1 / 6
p - 4 bg - green - 500 mb - 1 "
> < / div >
< div
class = "w - full sm : w - 1 / 2 md : w - 1 / 3 lg : w - 1 / 4 xl : w - 1 / 6
p - 4 bg - green - 700 mb - 1 "
> < / div >
< div
class = "w - full sm : w - 1 / 2 md : w - 1 / 3 lg : w - 1 / 4 xl : w - 1 / 6
p - 4 bg - green - 500 mb - 1 "
> < / div >
< div
class = "w - full sm : w - 1 / 2 md : w - 1 / 3 lg : w - 1 / 4 xl : w - 1 / 6
p - 4 bg - green - 700 mb - 1 "
> < / div >
< div
class = "w - full sm : w - 1 / 2 md : w - 1 / 3 lg : w - 1 / 4 xl : w - 1 / 6
p - 4 bg - green - 500 mb - 1 "
> < / div >
< div
class = "w - full sm : w - 1 / 2 md : w - 1 / 3 lg : w - 1 / 4 xl : w - 1 / 6
p - 4 bg - green - 700 mb - 1 "
> < / div >
< div
class = "w - full sm : w - 1 / 2 md : w - 1 / 3 lg : w - 1 / 4 xl : w - 1 / 6
p - 4 bg - green - 500 mb - 1 "
> < / div >
< div
class = "w - full sm : w - 1 / 2 md : w - 1 / 3 lg : w - 1 / 4 xl : w - 1 / 6
p - 4 bg - green - 700 mb - 1 "
> < / div >
< div
class = "w - full sm : w - 1 / 2 md : w - 1 / 3 lg : w - 1 / 4 xl : w - 1 / 6
p - 4 bg - green - 500 mb - 1 "
> < / div >
< div
class = "w - full sm : w - 1 / 2 md : w - 1 / 3 lg : w - 1 / 4 xl : w - 1 / 6
p - 4 bg - green - 700 mb - 1 "
> < / div >
< div
class = "w - full sm : w - 1 / 2 md : w - 1 / 3 lg : w - 1 / 4 xl : w - 1 / 6
p - 4 bg - green - 500 mb - 1 "
> < / div >
< div
class = "w - full sm : w - 1 / 2 md : w - 1 / 3 lg : w - 1 / 4 xl : w - 1 / 6
p - 4 bg - green - 700 mb - 1 "
> < / div >
< / div >
Resultados
default o xs
sm
md
&amp;amp;amp;gt;
lg
xl
Grid Responsivo con Columnas de Anchura Variable
Al igual que con el grid responsivo anterior, agregamos en el elemento base de flex la clase de flex-wrap y de igual manera hacemos uso de las pseudo-classes responsivas de sm, md, lgy xl.
< div class = “flex flex - wrap m - 4 ” >
< div
class = "w - full sm : w - 1 / 2 md : w - 2 / 5 lg : w - 1 / 6 xl : w - 7 / 12
p - 4 bg - green - 700 mb - 1 "
> < / div >
< div
class = "w - full sm : w - 1 / 3 md : w - 1 / 5 lg : w - 3 / 6 xl : w - 1 / 12
p - 4 bg - green - 500 mb - 1 "
> < / div >
< div
class = "w - full sm : w - 1 / 6 md : w - 2 / 5 lg : w - 2 / 6 xl : w - 4 / 12
p - 4 bg - green - 900 mb - 1 "
> < / div >
< div
class = "w - full sm : w - 1 / 6 md : w - 1 / 5 lg : w - 1 / 6 xl : w - 1 / 12
p - 4 bg - green - 700 mb - 1 "
> < / div >
< div
class = "w - full sm : w - 1 / 3 md : w - 3 / 5 lg : w - 1 / 6 xl : w - 5 / 12
p - 4 bg - green - 500 mb - 1 "
> < / div >
< div
class = "w - full sm : w - 1 / 2 md : w - 1 / 5 lg : w - 4 / 6 xl : w - 6 / 12
p - 4 bg - green - 900 mb - 1 "
> < / div >
< div
class = "w - full sm : w - 1 / 3 md : w - 1 / 5 lg : w - 2 / 6 xl : w - 3 / 12
p - 4 bg - green - 700 mb - 1 "
> < / div >
< div
class = "w - full sm : w - 1 / 6 md : w - 1 / 5 lg : w - 2 / 6 xl : w - 4 / 12
p - 4 bg - green - 500 mb - 1 "
> < / div >
< div
class = "w - full sm : w - 1 / 2 md : w - 3 / 5 lg : w - 2 / 6 xl : w - 5 / 12
p - 4 bg - green - 900 mb - 1 "
> < / div >
< div
class = "w - full sm : w - 1 / 2 md : w - 3 / 5 lg : w - 3 / 6 xl : w - 8 / 12
p - 4 bg - green - 700 mb - 1 "
> < / div >
< div
class = "w - full sm : w - 1 / 6 md : w - 1 / 5 lg : w - 2 / 6 xl : w - 2 / 12
p - 4 bg - green - 500 mb - 1 "
> < / div >
< div
class = "w - full sm : w - 1 / 3 md : w - 1 / 5 lg : w - 1 / 6 xl : w - 2 / 12
p - 4 bg - green - 900 mb - 1 "
> < / div >
< div
class = "w - full sm : w - 1 / 2 md : w - 2 / 5 lg : w - 2 / 6 xl : w - 5 / 12
p - 4 bg - green - 700 mb - 1 "
> < / div >
< div
class = "w - full sm : w - 1 / 3 md : w - 1 / 5 lg : w - 1 / 6 xl : w - 3 / 12
p - 4 bg - green - 500 mb - 1 "
> < / div >
< div
class = "w - full sm : w - 1 / 6 md : w - 2 / 5 lg : w - 3 / 6 xl : w - 4 / 12
p - 4 bg - green - 900 mb - 1 "
> < / div >
< / div >
Resultados
default o xs
sm
md
lg
xl
Conclusión
Crear grids en Tailwind usando flex es muy sencillo.
En flex podemos hacer uso de las clases de dimensiones porcentuales, algunos ejemplos son:
w-1/2, w-2/3, w-3/4, w-5/6, w-7/12,.
Estas mediciones nos facilita poder crear columnas de 2, 3, 4, 5, 6 y 12 columnas y sus combinaciones.
