Curso gratuito de Tailwind CSS

Tailwind Demos

// grid · columnas, filas y spans

CSS Grid

Define cuántas columnas, cuánto espacio, y cómo los elementos ocupan múltiples celdas con col-span y row-span.

grid-cols-* col-span-* row-span-* gap-* col-start/end

Demo en vivo

grid-cols-N

grid-cols-2

1
2
3
4

grid-cols-3 gap-3

1
2
3
4
5
6

col-span — ocupar múltiples columnas

col-span-4 (full)
col-span-3
1
col-span-2
1
1
1
1
1

Layout tipo dashboard

col-span-2 row-span-2
1×1
1×1
col-span-3 (footer)

grid-cols auto responsivo

A
B
C
D
E
F

grid-cols-[repeat(auto-fill,minmax(80px,1fr))]

Código importante

<!-- Activar grid -->
<div class="grid"></div>

<!-- Columnas: 1 a 12 -->
<div class="grid grid-cols-2"></div>
<div class="grid grid-cols-3"></div>
<div class="grid grid-cols-12"></div>

<!-- Gap entre celdas -->
<div class="grid grid-cols-3 gap-4"></div>
<div class="grid gap-x-4 gap-y-2"></div>

<!-- col-span: hijo ocupa N columnas -->
<div class="grid grid-cols-4 gap-2">
  <div class="col-span-4"></div>
  <div class="col-span-3"></div>
  <div class="col-span-1"></div>
</div>

<!-- row-span: hijo ocupa N filas -->
<div class="row-span-2"></div>
<div class="row-span-3"></div>

<!-- col-start / col-end (posición exacta) -->
<div class="col-start-2 col-end-4"></div>
<div class="col-start-1 col-end-full"></div>

<!-- Definir filas explícitas -->
<div class="grid grid-rows-3"></div>

<!-- Auto-fill responsivo (valor arbitrario) -->
<div class="grid grid-cols-[repeat(auto-fill,minmax(200px,1fr))]">
</div>

<!-- place-items: centra en ambos ejes -->
<div class="grid place-items-center"></div>