Curso de Tailwind CSS 2020

Curso de Tailwind CSS 2020

Víctor Yoalli Domínguez

Víctor Yoalli Domínguez

Cómo crear grids o columnas en Tailwind CSS

7/29

Lectura

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.

Aportes 33

Preguntas 2

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

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

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

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

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

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

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

    <div class="flex m-4">
        <div class="m-2 w-1/2 p-4 bg-blue-800">
            <p>w-1/2</p>
        </div>
        <div class="m-2 w-1/2 p-4 bg-blue-800">
            <p>w-1/2</p>
        </div>
    </div>

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

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

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

Grid Tailwind

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

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

¿Alguien puede ver el código?

A mi no me aparece.

¿Como utilizar CSS Grid Layout system en Tailwind?

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

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

Tailwind con Grid

<div class="grid grid-cols-3 gap-4">
  <div>1</div>
  <!-- ... -->
  <div>9</div>
</div>

se me hace muy interesante flex, y toda la posibilidad que te da

Muy interesante la clase, parece bastante intuitivo esto de las clases. Espero siga asi en la practica 😅

Tailwind es de lo mejor.

No sale el código

El paso 1 solo aparece un </div>

Intenté realizar el ejercicio, sin embargo las columnas no se ajustan al ancho del navegador.
Ver Imagen

Hasta el momento me va gustando mucho este curso.

Nice!!!

Existe alguna clase en tailwind que agrege la propiedad {fon.family: inherit} ?

Bien, pero ¿Qué pasaría con los offset de otros Frameworks?

Para los que tienen la duda de por qué no usar grid directamente les dejo mi opinión:
Yo creo que es porque muchas propiedades que tiene Grid para ser organizado no son compatibles con internet explorer (IE) entonces en el mundo laboral si la página que uno hace debe dar soporte a usuarios que usen IE (si, todavía existen xD) no serviría grid, mientras que flex si tiene soporte en IE.

Se puede consultar todo sobre compatibilidad con navegadores en esta página: https://caniuse.com/?search=grid

No entiendo porque haría grid con flexbox teniendo Grid en Tailwind, dejo la documentación para utilizar grid: https://tailwindcss.com/docs/display#grid y si no tienen idea de CSS Grid hay un curso muy bueno: https://platzi.com/cursos/css-grid-layout/

f

También se puede utilizar el grid nativo de Tailwind, aquí el enlace a la documentación: https://tailwindcss.com/docs/grid-template-columns

Esta muy interesante. Sin embargo, creo que es mejor usar otras librerías para el grid como Bootstrap ya que hacerlo con tailwind tiene ciertas limitantes porque lo hace prácticamente nativo. Bootstrap y otros como Bulma ya tienen preparado casos como los offsets y aquí habría que hacerlo con un div en blanco o algo así.