O Tailwind CSS oferece suporte completo ao CSS Grid, permitindo construir layouts baseados em linhas e colunas com precisão e flexibilidade. Através de utilitárias simples, você pode definir o número de colunas, espaçamento entre elementos, alinhamentos e comportamento responsivo com facilidade.
Ativando o Grid
Use a classe grid para transformar um elemento pai em um container de grade.
<div class="grid grid-cols-3 gap-4">
<div class="bg-blue-100 p-4">1</div>
<div class="bg-blue-200 p-4">2</div>
<div class="bg-blue-300 p-4">3</div>
</div>
Neste exemplo, temos três colunas com espaçamento entre os itens (gap-4).
Definindo número de colunas
Use grid-cols-{n} para definir o número de colunas fixas:
<div class="grid grid-cols-2 gap-6">
<div class="bg-gray-200 p-4">A</div>
<div class="bg-gray-300 p-4">B</div>
</div>
Você pode usar de 1 a 12 colunas (grid-cols-1 até grid-cols-12), ou valores responsivos, como:
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<!-- colunas variam conforme o breakpoint -->
</div>
Colunas automáticas
Utilize auto-cols-* para definir a largura das colunas geradas automaticamente:
<div class="grid grid-flow-col auto-cols-max gap-4">
<div class="bg-indigo-100 p-2">Item A</div>
<div class="bg-indigo-200 p-2">Item B</div>
<div class="bg-indigo-300 p-2">Item C</div>
</div>
Controle de linhas e colunas
Posicionamento manual:
<div class="grid grid-cols-4 gap-2">
<div class="col-span-2 bg-green-100 p-4">Span 2 colunas</div>
<div class="col-span-1 bg-green-200 p-4">Span 1</div>
<div class="col-span-1 bg-green-300 p-4">Span 1</div>
</div>
Você também pode usar row-span-* para definir a altura ocupada em linhas.
Alinhamento de itens
-
items-start,items-center,items-end -
justify-items-start,justify-items-center,justify-items-end
<div class="grid grid-cols-3 items-center h-32">
<div class="bg-blue-200 p-2">Alinhado ao centro</div>
<div class="bg-blue-300 p-2">Centro</div>
<div class="bg-blue-400 p-2">Centro</div>
</div>
Grid com layout responsivo
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
<div class="bg-gray-100 p-4">Item 1</div>
<div class="bg-gray-200 p-4">Item 2</div>
<div class="bg-gray-300 p-4">Item 3</div>
<div class="bg-gray-400 p-4">Item 4</div>
</div>
Este padrão é comum para cards e boxes de conteúdo que se ajustam automaticamente à largura da tela.
O sistema de Grid do Tailwind é ideal para layouts mais complexos ou estruturados, como dashboards, seções simétricas e páginas com múltiplas áreas. Quando combinado com flex, oferece controle total sobre a composição visual.