Exemplos de Grid
Padrões comuns de layout flexbox e CSS Grid com Tailwind CSS.
//
Busque em todas as páginas da documentação
Padrões comuns de layout flexbox e CSS Grid com Tailwind CSS.
🤖 Read the SystemsArchitect.io Blog for over 100+ cloud architecture articles 🔥
Itens organizados horizontalmente com espaçamento.
<div className="flex space-x-4">
<div className="rounded bg-blue-500 px-4 py-2 text-white">Item 1</div>
<div className="rounded bg-blue-500 px-4 py-2 text-white">Item 2</div>
<div className="rounded bg-blue-500 px-4 py-2 text-white">Item 3</div>
</div>Notas: flex cria uma linha por padrão. space-x-4 adiciona espaçamento horizontal entre os itens.
Itens empilhados verticalmente com espaçamento.
<div className="flex flex-col space-y-4">
<div className="rounded bg-green-500 px-4 py-2 text-white">Item 1</div>
<div className="rounded bg-green-500 px-4 py-2 text-white">Item 2</div>
<div className="rounded bg-green-500 px-4 py-2 text-white">Item 3</div>
</div>Notas: flex-col muda a direção para vertical. space-y-4 adiciona espaçamento vertical.
Conteúdo centralizado horizontalmente no contêiner.
<div className="flex justify-center">
<div className="rounded bg-purple-500 px-6 py-3 text-white">
Conteúdo Centralizado
</div>
</div>Notas: justify-center centraliza os itens ao longo do eixo principal (horizontal por padrão).
Conteúdo centralizado verticalmente no contêiner.
<div className="flex h-64 items-center bg-gray-100">
<div className="rounded bg-purple-500 px-6 py-3 text-white">
Centralizado Verticalmente
</div>
</div>Notas: items-center centraliza os itens ao longo do eixo transversal. O contêiner precisa de uma altura explícita.
Conteúdo centralizado horizontal e verticalmente.
<div className="flex h-64 items-center justify-center bg-gray-100">
<div className="rounded bg-purple-500 px-6 py-3 text-white">
Totalmente Centralizado
</div>
</div>Notas: Combine justify-center e items-center para centralização perfeita. Comum para seções hero e estados vazios.
Itens com espaço máximo entre eles.
<div className="flex justify-between">
<div className="rounded bg-blue-500 px-4 py-2 text-white">Esquerda</div>
<div className="rounded bg-blue-500 px-4 py-2 text-white">Direita</div>
</div>Notas: justify-between empurra os itens para as extremidades opostas. Perfeito para cabeçalhos com logo e navegação.
Itens com espaço igual ao redor de cada item.
<div className="flex justify-around">
<div className="rounded bg-blue-500 px-4 py-2 text-white">A</div>
<div className="rounded bg-blue-500 px-4 py-2 text-white">B</div>
<div className="rounded bg-blue-500 px-4 py-2 text-white">C</div>
</div>Notas: justify-around distribui os itens com espaço igual ao redor de cada um. O espaço nas bordas é metade do espaço entre os itens.
Itens com espaço igual entre e ao redor.
<div className="flex justify-evenly">
<div className="rounded bg-blue-500 px-4 py-2 text-white">A</div>
<div className="rounded bg-blue-500 px-4 py-2 text-white">B</div>
<div className="rounded bg-blue-500 px-4 py-2 text-white">C</div>
</div>Notas: justify-evenly cria um espaçamento perfeitamente igual, incluindo as bordas.
Itens alinhados no topo (início do eixo transversal).
<div className="flex h-32 items-start bg-gray-100">
<div className="rounded bg-green-500 px-4 py-2 text-white">Topo</div>
<div className="h-20 rounded bg-green-500 px-4 py-2 text-white">Item Alto</div>
</div>Notas: items-start alinha os itens no topo em layouts horizontais.
Itens alinhados na parte inferior (fim do eixo transversal).
<div className="flex h-32 items-end bg-gray-100">
<div className="rounded bg-green-500 px-4 py-2 text-white">Inferior</div>
<div className="h-20 rounded bg-green-500 px-4 py-2 text-white">Item Alto</div>
</div>Notas: items-end alinha os itens na parte inferior em layouts horizontais.
Itens esticados para preencher a altura do eixo transversal.
<div className="flex h-32 items-stretch bg-gray-100">
<div className="rounded bg-purple-500 px-4 text-white">Esticado</div>
<div className="rounded bg-purple-500 px-4 text-white">Esticado</div>
</div>Notas: items-stretch (padrão) faz os itens preencherem a altura do contêiner. Útil para cards de altura igual.
Itens quebram para a próxima linha quando o espaço acaba.
<div className="flex flex-wrap gap-4">
<div className="rounded bg-blue-500 px-4 py-2 text-white">Item 1</div>
<div className="rounded bg-blue-500 px-4 py-2 text-white">Item 2</div>
<div className="rounded bg-blue-500 px-4 py-2 text-white">Item 3</div>
<div className="rounded bg-blue-500 px-4 py-2 text-white">Item 4</div>
<div className="rounded bg-blue-500 px-4 py-2 text-white">Item 5</div>
</div>Notas: flex-wrap permite a quebra de linha. gap-4 funciona melhor que space-x-* para layouts com quebra de linha.
Um item cresce para preencher o espaço disponível.
<div className="flex gap-4">
<div className="rounded bg-blue-500 px-4 py-2 text-white">Fixo</div>
<div className="flex-1 rounded bg-green-500 px-4 py-2 text-white">Cresce</div>
<div className="rounded bg-blue-500 px-4 py-2 text-white">Fixo</div>
</div>Notas: flex-1 faz o item crescer para preencher o espaço disponível. Comum para barras de pesquisa e áreas de conteúdo.
Item encolhe quando o espaço é limitado.
<div className="flex gap-4">
<div className="w-64 flex-shrink-0 rounded bg-blue-500 px-4 py-2 text-white">
Largura Fixa
</div>
<div className="flex-shrink rounded bg-green-500 px-4 py-2 text-white">
Pode Encolher
</div>
</div>Notas: flex-shrink-0 impede o encolhimento. Útil para sidebars e elementos de largura fixa.
Itens em ordem horizontal reversa.
<div className="flex flex-row-reverse space-x-4 space-x-reverse">
<div className="rounded bg-purple-500 px-4 py-2 text-white">Primeiro</div>
<div className="rounded bg-purple-500 px-4 py-2 text-white">Segundo</div>
<div className="rounded bg-purple-500 px-4 py-2 text-white">Terceiro</div>
</div>Notas: flex-row-reverse inverte a ordem. Adicione space-x-reverse para corrigir a direção do espaçamento.
Cabeçalho típico com logo, navegação e ações.
<header className="flex items-center justify-between bg-white px-6 py-4 shadow">
<div className="text-xl font-bold text-gray-900">Logo</div>
<nav className="flex space-x-6">
<a href="#" className="text-gray-700 hover:text-gray-900">Home</a>
<a href="#" className="text-gray-700 hover:text-gray-900">Sobre</a>
<a href="#" className="text-gray-700 hover:text-gray-900">Contato</a>
</nav>
<button className="rounded bg-blue-600 px-4 py-2 text-white">Entrar</button>
</header>Notas: Combina justify-between e items-center para um layout de cabeçalho clássico.
Card flexbox com cabeçalho, conteúdo e rodapé.
<div className="flex h-64 flex-col rounded-lg border border-gray-200 bg-white shadow">
<div className="border-b border-gray-200 px-4 py-3">
<h3 className="font-semibold text-gray-900">Cabeçalho do Card</h3>
</div>
<div className="flex-1 overflow-y-auto px-4 py-3">
<p className="text-gray-600">Área de conteúdo rolável que cresce para preencher o espaço disponível.</p>
</div>
<div className="border-t border-gray-200 px-4 py-3">
<button className="text-sm text-blue-600">Ação</button>
</div>
</div>Notas: flex-1 na área de conteúdo faz com que ela cresça. overflow-y-auto habilita a rolagem se o conteúdo for longo.
Layout simples de duas colunas.
<div className="grid grid-cols-2 gap-4">
<div className="rounded bg-blue-500 p-4 text-white">Coluna 1</div>
<div className="rounded bg-blue-500 p-4 text-white">Coluna 2</div>
</div>Notas: grid-cols-2 cria duas colunas iguais. gap-4 adiciona espaçamento entre os itens do grid.
Três colunas iguais.
<div className="grid grid-cols-3 gap-4">
<div className="rounded bg-green-500 p-4 text-white">Col 1</div>
<div className="rounded bg-green-500 p-4 text-white">Col 2</div>
<div className="rounded bg-green-500 p-4 text-white">Col 3</div>
</div>Notas: Use grid-cols-4, grid-cols-6, etc. para mais colunas.
Grid que se adapta ao tamanho da tela.
<div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
<div className="rounded bg-purple-500 p-4 text-white">Item 1</div>
<div className="rounded bg-purple-500 p-4 text-white">Item 2</div>
<div className="rounded bg-purple-500 p-4 text-white">Item 3</div>
<div className="rounded bg-purple-500 p-4 text-white">Item 4</div>
<div className="rounded bg-purple-500 p-4 text-white">Item 5</div>
<div className="rounded bg-purple-500 p-4 text-white">Item 6</div>
</div>Notas: 1 coluna no mobile, 2 no tablet, 3 no desktop. Padrão de grid responsivo mais comum.
Grid que se ajusta automaticamente aos itens.
<div className="grid grid-cols-[repeat(auto-fit,minmax(200px,1fr))] gap-4">
<div className="rounded bg-blue-500 p-4 text-white">Auto 1</div>
<div className="rounded bg-blue-500 p-4 text-white">Auto 2</div>
<div className="rounded bg-blue-500 p-4 text-white">Auto 3</div>
<div className="rounded bg-blue-500 p-4 text-white">Auto 4</div>
</div>Notas: Os itens quebram automaticamente com base no espaço disponível. A largura mínima é de 200px. Requer sintaxe de valor arbitrário.
Conteúdo principal com sidebar de largura fixa.
<div className="grid grid-cols-[250px_1fr] gap-6">
<aside className="rounded bg-gray-200 p-4">
<h3 className="font-semibold">Sidebar</h3>
<nav className="mt-4 space-y-2">
<a href="#" className="block text-gray-700">Link 1</a>
<a href="#" className="block text-gray-700">Link 2</a>
</nav>
</aside>
<main className="rounded bg-white p-6 shadow">
<h1 className="text-2xl font-bold">Conteúdo Principal</h1>
<p className="mt-4 text-gray-600">O conteúdo preenche o espaço restante.</p>
</main>
</div>Notas: grid-cols-[250px_1fr] cria uma sidebar de 250px e uma área principal flexível. Use valores arbitrários para tamanhos de coluna personalizados.
Dashboard de três colunas com cabeçalho.
<div className="grid grid-cols-[200px_1fr_300px] grid-rows-[auto_1fr] gap-4">
<header className="col-span-3 rounded bg-blue-600 p-4 text-white">
Cabeçalho abrange todas as colunas
</header>
<aside className="rounded bg-gray-200 p-4">Sidebar Esquerda</aside>
<main className="rounded bg-white p-6 shadow">Conteúdo Principal</main>
<aside className="rounded bg-gray-200 p-4">Sidebar Direita</aside>
</div>Notas: col-span-3 faz o cabeçalho abranger todas as três colunas. grid-rows-[auto_1fr] define a altura do cabeçalho como automática e o conteúdo para preencher o espaço restante.
Item abrangendo múltiplas colunas de grid.
<div className="grid grid-cols-3 gap-4">
<div className="col-span-2 rounded bg-blue-500 p-4 text-white">
Abrange 2 colunas
</div>
<div className="rounded bg-blue-500 p-4 text-white">1 coluna</div>
<div className="rounded bg-blue-500 p-4 text-white">1 coluna</div>
<div className="rounded bg-blue-500 p-4 text-white">1 coluna</div>
<div className="rounded bg-blue-500 p-4 text-white">1 coluna</div>
</div>Notas: col-span-2 faz o item ocupar duas colunas. Use col-span-3, col-span-4, etc. para aberturas maiores.
Item abrangendo múltiplas linhas de grid.
<div className="grid grid-cols-3 grid-rows-3 gap-4">
<div className="row-span-2 rounded bg-purple-500 p-4 text-white">
Abrange 2 linhas
</div>
<div className="rounded bg-purple-500 p-4 text-white">Item 2</div>
<div className="rounded bg-purple-500 p-4 text-white">Item 3</div>
<div className="rounded bg-purple-500 p-4 text-white">Item 4</div>
<div className="rounded bg-purple-500 p-4 text-white">Item 5</div>
<div className="col-span-2 rounded bg-purple-500 p-4 text-white">
Abrange 2 colunas
</div>
</div>Notas: row-span-2 faz o item abranger duas linhas. Combine com col-span-* para layouts complexos.
Grid com alturas de linha variadas.
<div className="grid grid-cols-3 gap-4">
<div className="row-span-2 rounded bg-blue-500 p-4 text-white">Alto</div>
<div className="rounded bg-blue-500 p-4 text-white">Curto</div>
<div className="row-span-3 rounded bg-blue-500 p-4 text-white">Muito Alto</div>
<div className="rounded bg-blue-500 p-4 text-white">Curto</div>
<div className="row-span-2 rounded bg-blue-500 p-4 text-white">Alto</div>
<div className="rounded bg-blue-500 p-4 text-white">Curto</div>
</div>Notas: Defina manualmente os row-span para criar o efeito masonry. Para masonry real (empacotamento automático), use uma biblioteca JavaScript.
Diferentes tamanhos de gap para linhas e colunas.
<div className="grid grid-cols-3 gap-x-6 gap-y-2">
<div className="rounded bg-green-500 p-4 text-white">Item 1</div>
<div className="rounded bg-green-500 p-4 text-white">Item 2</div>
<div className="rounded bg-green-500 p-4 text-white">Item 3</div>
<div className="rounded bg-green-500 p-4 text-white">Item 4</div>
<div className="rounded bg-green-500 p-4 text-white">Item 5</div>
<div className="rounded bg-green-500 p-4 text-white">Item 6</div>
</div>Notas: gap-x-6 define o gap horizontal, gap-y-2 define o gap vertical. Use quando linhas e colunas precisam de espaçamento diferente.
Item de grid que sai para largura total.
<div className="grid grid-cols-3 gap-4">
<div className="rounded bg-blue-500 p-4 text-white">Item 1</div>
<div className="rounded bg-blue-500 p-4 text-white">Item 2</div>
<div className="rounded bg-blue-500 p-4 text-white">Item 3</div>
<div className="col-span-full rounded bg-purple-500 p-4 text-white">
Item de Largura Total
</div>
<div className="rounded bg-blue-500 p-4 text-white">Item 4</div>
<div className="rounded bg-blue-500 p-4 text-white">Item 5</div>
<div className="rounded bg-blue-500 p-4 text-white">Item 6</div>
</div>Notas: col-span-full faz o item abranger todas as colunas, independentemente da contagem de colunas do grid.
Alinha itens dentro das células do grid.
<div className="grid grid-cols-3 gap-4">
<div className="flex h-32 items-center justify-center rounded bg-blue-500 text-white">
Centralizado
</div>
<div className="flex h-32 items-start justify-start rounded bg-green-500 p-2 text-white">
Canto Superior Esquerdo
</div>
<div className="flex h-32 items-end justify-end rounded bg-purple-500 p-2 text-white">
Canto Inferior Direito
</div>
</div>Notas: Use flexbox dentro dos itens do grid para um alinhamento preciso. O grid cuida do layout, o flexbox cuida do posicionamento dos itens.
Layout clássico de cabeçalho, rodapé, sidebar e conteúdo principal.
<div className="grid min-h-screen grid-cols-[200px_1fr_200px] grid-rows-[auto_1fr_auto]">
<header className="col-span-3 bg-gray-900 p-4 text-white">Cabeçalho</header>
<aside className="bg-gray-200 p-4">Sidebar Esquerda</aside>
<main className="bg-white p-6">Conteúdo Principal</main>
<aside className="bg-gray-200 p-4">Sidebar Direita</aside>
<footer className="col-span-3 bg-gray-900 p-4 text-white">Rodapé</footer>
</div>Notas: min-h-screen garante que o layout preencha a viewport. grid-rows-[auto_1fr_auto] faz com que o cabeçalho/rodapé se ajustem ao conteúdo e a área principal preencha o espaço restante.
Revisado por Chris St. John·Última atualização: 16 de jul. de 2026
🤖 Read the SystemsArchitect.io Blog for over 100+ cloud architecture articles 🔥