Aprovecha el precio especial y haz tu profesión a prueba de IA

Antes: $249

Currency
$209
Suscríbete

Termina en:

1 Días
13 Hrs
46 Min
54 Seg
Curso de Tailwind CSS 1

Curso de Tailwind CSS 1

Víctor Yoalli Domínguez

Víctor Yoalli Domínguez

Cómo crear grids o columnas en Tailwind CSS

7/29

Reading

In this class we will learn how to create a column grid using flex in Tailwind.

...

Register or login to read the rest of the content.

Contributions 36

Questions 2

Sort by:

Want to see more contributions, questions and answers from the community?

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

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

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

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>

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

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

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

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

¿Alguien puede ver el código?

A mi no me aparece.

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

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

¿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

esto me servirá en un futuro muy cercano

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