Cómo crear grids o columnas en Tailwind CSS

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.

Guillermo Baldán López

student•

Yo prefiero css grid, te ahorras poner un montón de divs

WILSON ROLANDO RAMÍREZ MEJÍA

student•

Algun ejemplo que puedas compartir, mis conocimientos aun no son tan amplios, gracias

Kevin Parra Lopez

student•

Se me hace muy interesante, aunque creo que llevara mucho código inline

Emanuel Torres

student•

totalmente de acuerdo

Daniel Esteban Santos Mendez

student•

Por qué los Framewoks css no usan display grid? Siempre crean sus propias grillas, creo que es mejor usar grid de forma nativa así se use un framework, resulta más facil y no llenamos el HTML de div

José Heriberto López Ruiz

student•

Probablemente se deba a que al usar sus propias grillas ya tienen la lógica que hace que esas grillas se adapten de forma responsiva. Es decir, si usaran display grid, entonces tendrías que hacer otro display grid para otro tamaño de media query, y sería muchísimo más trabajo. Al usar una grilla hecha por un framework, ya no te tienes qué preocupar por modificar el display grid cuando el usuario usa otro media query, porque la lógica ya está hecha por el framework.

John W. Martínez

student•

Estaba pensando lo mismo. Quiero crear un panel de administración para una plataforma y por eso empecé con el curso de Tailwind CSS, porque he visto que es el mejor para el tema del UI/UX. Pero creo que la estructura principal la voy a manejar con CSS nativo y usando display:grid, aprovechando el superpoder de los templates.

Ya para la organización de la información si usaría el sistema de grid del framework como tal.

Luis Angel Murrugarra Astolingon

student•

creo que ya implementaron la clase grid , puede revisarlo en este link https://tailwindcss.com/docs/grid-template-columns

Jimmy Buriticá Londoño

student•

Esta muy claro, aunque se ve mucho código.

Guillermo Vara De Gante

student•

La parte del codigo que no se ve en la primera seccion es un

    &lt;div class=&quot;flex m-4&quot;&gt;
        &lt;div class=&quot;m-2 w-1/2 p-4 bg-blue-800&quot;&gt;
            &lt;p&gt;w-1/2&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class=&quot;m-2 w-1/2 p-4 bg-blue-800&quot;&gt;
            &lt;p&gt;w-1/2&lt;/p&gt;
        &lt;/div&gt;
    &lt;/div&gt;

Edgar Ramón González Contreras

student•

Vaya, nunca creí que trabajar con flexbox seria aun mas sencillo que con bootstrap :0

Christian Alvarenga

student•

Creo que aun no estaba implementado pero, ahora Tailwind ya trae el display Grid.

Grid Tailwind

Aarón Fabricio Santa Cruz Valdez

student•

Esas medidas de porcentaje me confunde. Para crear grillas siento que mejor usar Grid

Juan Esteban Muñoz

student•

Pregunta... en un proyecto puede co-existir tanto tailwind como CSS nativo en otra hoja de estilos y enlazarla?

Said Alejandro Rosas Vera

student•

Se podría, pero Tailwind directamente desaprueba esto debido a que se pierde el enfoque del framework, la idea es no salir del markup (Html). Pero, en caso de que sea totalmente necesario, si, se podrían agregar los estilos en la misma hoja donde agregaste las directivas de @tailwind. Si haces esto, te recomiendo usar la directiva @layer (esto te permite añadir reglas de estilos al final de alguna de las directivas que importaste), de esta manera:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
	.componente { @apply text-red-100; }
}

Esto básicamente lo que hace es añadir las reglas que coloques dentro AL FINAL del bloque en el que decidiste que van a pertenecer, en este caso, en la hoja compilada vas a poder notar que .componente estaría declarado después de components pero antes que utilities. Ahora, podrás estarte preocupando, ¿por qué no simplemente colocamos los estilos después de @tailwind components? Bueno, principalmente porque es una buena práctica, además de que es más tedioso en caso de que la cantidad de estilos que escribas entre estas directivas sea mucho porque las tres directivas deberían permanecer juntas. Igualmente, una recomendación es que si escribirás directamente desde las hojas de estilo uses la directiva @apply para poder insertar utilidades de Tailwind ahí mismo, a continuación de ilustro un ejemplo:

.componente {
	@apply text-sm text-red-100 font-thin;
}

Ahora, otra vez te podrías estar haciendo una pregunta, ¿por qué no simplemente escribimos reglas Css nativamente? Bueno, el principal objetivo de Tailwind es mantener un "design system" que en palabras fáciles significa mantener una uniformidad donde si a un componente la asignamos la clase font-thin tenga el mismo valor que cualquier otro elemento donde esta clase es aplicada, digo esto porque muchas veces solemos descartar la uniformidad inconscientemente y hay elementos que tienen un, en este caso, font-weight distinto entre si aún cuando son elementos similares, esto porque se nos olvida los valores que debemos seguir (en casos donde los estilos son muy extensos). Espero esta explicación haya resuelto tú duda, quedo al pendiente de tú respuesta, ¡un saludo! :D

Victor Manuel Sarria Salinas

student•

creo que esto es lo mismo que leer la documentación oficial, cuando debería ser una clase.

Jaime David Burbano Montoya

student•

Hay un error en el código del paso 2, muestra solo el html de un div, pero se están mostrando 2 que están en w-1/2

Favio Sauto

student•

¿Alguien puede ver el código?

A mi no me aparece.

Daniel Jonguitud

student•

A mi tampoco me aparece, según la fecha de publicación al parecer todavia se sigue actualizando

JuanFe Peralta

Team Platzi•

Ya se solucionó ese detalle, ¿podrían confirmarnos si ya pueden ver el código? Por favor. :)

Ricardo Portillo

student•

Si alguien esta viendo el curso en 2022 como yo esto cambio por favor acceder a la documentación oficial para ver los cambios

Cesar Velásquez Córdova

student•

Christian Velázquez

student•

Tailwind, me está gustando; pero, lo pondría en un empate con Materialize.

Abner Batz

student•

¿Como utilizar CSS Grid Layout system en Tailwind?

Patricio Lorca

student•

esto esta genial, pero porque falta la clase de los display: grid?

Francisco Soto

student•

Deberian a ver creado el video.....para eso buscamos en google

Wilson Orlando Capacho Carmona

student•

Eso esta facil padre..yo creo que cualquiera lo puede entender

Never Andrés Aparicio Hernandéz

student•

De hecho todo esta en la documentacion

<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>

<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>

<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>

<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>

<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>

    &lt;div class=&quot;flex m-4&quot;&gt;
        &lt;div class=&quot;m-2 w-1/2 p-4 bg-blue-800&quot;&gt;
            &lt;p&gt;w-1/2&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class=&quot;m-2 w-1/2 p-4 bg-blue-800&quot;&gt;
            &lt;p&gt;w-1/2&lt;/p&gt;
        &lt;/div&gt;
    &lt;/div&gt;

Cómo crear grids o columnas en Tailwind CSS

Introducción, instalación y ambiente de desarrollo

¿Qué es Tailwind CSS?

Instalación y ambiente de desarrollo

Directivas de Tailwind

Conceptos básicos

Personalización y configuración

Responsive Design, Mobile First y Utility First

Utilerías

Colores

Cómo crear grids o columnas en Tailwind CSS

Dimensiones y Espacios

Cambiando las propiedades de la tipografía

Ajustando el espaciado entre letras y líneas

Display

Flexbox

Crea tus propias utilerías

Entendiendo las variantes y las pseudo-clases

¡Es hora de practicar!

Proyecto: PlatziFood

Creando una card

Aplicando formato a la card

Responsive design en la card

Construye el header

Crea el footer

Crea un banner

Cómo integrar una card

Forms

Directivas de Apply

Extraer componentes

Navbar

Alpine JS

Optimiza tu archivo: PurgeCSS y NanoCSS

Conclusiones

Conclusiones y qué sigue