Cómo crear grids o columnas en Tailwind CSS

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

https://tailwindcomponents.com/cheatsheet/

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

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

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

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.

¿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

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