Cómo crear grids o columnas en Tailwind CSS

Clase 7 de 29 • Curso de Tailwind CSS 1

Clase anteriorSiguiente clase

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.

  1. Crearemos un elemento que contendrá las columnas de nuestro Grid con la clase de flex.
<div class=“flex”>;
</div>
  1. 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 1.png

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

2.png

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

3.png

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 5.png

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

6.png

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

7.PNG

sm

8.PNG

md

9.PNG &amp;amp;amp;amp;gt; lg

10.PNG

xl

11.PNG

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

12.PNG

sm

13.PNG

md

14.PNG

lg

15.PNG

xl
16.PNG

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.