Grid no Tailwind: colunas, spans e layouts que respondem

Grid no Tailwind descreve a malha no container e a ocupação nos filhos. grid-cols-3 cria três trilhos iguais; col-span-2 faz um item ocupar dois. Quando o alinhamento precisa funcionar nas duas dimensões, essa relação costuma ser mais honesta que distribuir larguras com Flexbox.

O dashboard da clínica começa com cartões simples e termina numa galeria que responde pelo espaço do próprio container.

Três colunas são uma declaração

O container define os trilhos. Os filhos entram na próxima célula disponível.

<section class="grid grid-cols-3 gap-4">
  <article>Consultas</article>
  <article>Pacientes</article>
  <article>Receita</article>
</section>

O minmax(0, 1fr) permite que o trilho encolha abaixo do tamanho mínimo do conteúdo. Essa proteção evita parte dos estouros que uma versão ingênua com repeat(3, 1fr) pode apresentar.

Span altera ocupação, não quantidade de colunas

Num dashboard de três colunas, o gráfico pode usar duas. O container continua com três trilhos.

<section class="grid grid-cols-3 gap-4">
  <article class="col-span-2">Agenda semanal</article>
  <article>Próxima consulta</article>
</section>

Se o item seguinte não cabe no restante da linha, ele vai para a próxima. Span é pedido de ocupação, não coordenada absoluta.

Linhas podem crescer com o conteúdo

Normalmente você deixa linhas implícitas com altura automática. Para cartões visuais, pode definir uma altura mínima nas linhas que o Grid criar.

<section class="grid auto-rows-min grid-cols-2 gap-4">
  <article class="row-span-2">Fila de atendimento</article>
  <article>Avisos</article>
  <article>Estoque</article>
</section>

Não fixe grid-rows-* apenas para igualar cartões com quantidades diferentes de texto. O conteúdo pode ampliar, o usuário pode aumentar a fonte e a tradução pode ser maior. Prefira minmax() ou fluxo automático.

auto-fit cria uma galeria pelo espaço disponível

Um valor arbitrário expressa a regra que ainda não possui classe nomeada:

<section class="grid grid-cols-[repeat(auto-fit,minmax(16rem,1fr))] gap-4">
  <article>Rex</article><article>Luna</article><article>Thor</article>
</section>

O CSS compilado no teste preservou o valor:

Cada cartão pede no mínimo 16rem e pode crescer até uma fração. Quando não cabe outro, ele desce. A galeria responde ao container sem uma media query dedicada. Isso não elimina breakpoints da página; apenas torna esse componente menos dependente da viewport.

Dashboard de doze colunas distribui responsabilidades

Doze é útil porque divide por dois, três, quatro e seis. Comece com uma coluna no mobile; ative a malha grande depois.

<main class="grid grid-cols-1 gap-6 lg:grid-cols-12">
  <aside class="lg:col-span-3">Navegação</aside>
  <section class="lg:col-span-6">Agenda</section>
  <aside class="lg:col-span-3">Resumo</aside>
</main>

Não some spans maiores que doze esperando que o navegador comprima. O item que não cabe começa nova linha. Use o painel de Grid do DevTools para enxergar os trilhos em vez de mudar números no escuro.

Alinhar célula, conteúdo e item são operações diferentes

place-items-center alinha o conteúdo dentro de todas as células. Um único item pode sobrescrever com justify-self-* ou self-*.

<section class="grid min-h-64 place-items-center">
  <p>Sem consultas pendentes.</p>
  <button class="justify-self-end self-end">Criar consulta</button>
</section>

O CLI gerou place-items: center para a classe do container. Se a célula tem o mesmo tamanho do conteúdo, não sobra área e o deslocamento parece não funcionar, exatamente como ocorre com justify-content no Flexbox.

Dense preenche buracos e pode alterar a leitura visual

grid-flow-dense permite que itens posteriores ocupem espaços anteriores. É tentador em uma galeria de tamanhos variados.

<section class="grid grid-flow-dense grid-cols-3 gap-4">
  <article class="col-span-2">Destaque</article>
  <article>Paciente A</article>
  <article>Paciente B</article>
</section>

O navegador pode posicionar B antes de A visualmente para tapar um buraco, mas a ordem do DOM não muda. Em conteúdo que deve ser lido numa sequência, essa otimização prejudica orientação e teclado. Reserve dense para itens realmente independentes.

Flex ou Grid: quem manda no tamanho?

Use esta decisão como ponto de partida:

Você pode usar Grid na página e Flexbox dentro do cartão. Ferramentas não são times rivais. A lição de Flexbox detalha o caso linear, e responsividade no Tailwind mostra como os dois mudam de configuração.

Erro reproduzido: auto-fit não é um atalho pronto

grid-cols-auto-fit não pertence ao catálogo padrão. O teste mínimo com Tailwind 4.3.3 tornou a suposição explícita:

@import "tailwindcss";
.qa { @apply grid-cols-auto-fit; }

printf '@import "tailwindcss"; .qa { @apply grid-cols-auto-fit; }\n' | npx @tailwindcss/cli@4.3.3 -i - -o /dev/null

O CLI encerrou com código 1. Escreva a grade com um valor arbitrário completo ou registre uma utility própria; o nome intuitivo sozinho não gera repeat().

Missão da malha previsível

Monte três cartões com auto-fit, depois transforme a página num dashboard de 12 colunas a partir de lg. A missão termina quando nenhum filho precisa de largura em pixels e quando a ordem de leitura continua igual à ordem visual. Se um cartão estourar, reduza o texto de teste só depois de inspecionar min-width; conteúdo real não se adapta ao layout por educação.

Leia a grade pelo painel do navegador

Ative a sobreposição de Grid no DevTools e nomeie o que enxerga: linhas, colunas, gaps e células vazias. Compare com o CSS gerado para grid-cols-*. Quando a visualização mostra três trilhos e o item ocupa dois, você consegue separar configuração do container de span do filho.

Teste também mais e menos itens. Auto-fit pode recolher trilhos vazios; uma grade fixa de três colunas mantém os três mesmo com um único cartão. Nenhuma opção é melhor sempre. Uma área de métricas previsível pode querer trilhos fixos; uma galeria de pacientes costuma querer ocupar o espaço disponível.

Evite usar posição visual como dado. Se um cartão destaque precisa aparecer primeiro por importância, coloque-o primeiro no HTML em vez de depender de coordenadas ou dense. Isso preserva leitura, busca e foco. Documente spans como exceções do conteúdo, não como números decorativos. No guia completo de Tailwind, Grid entra depois dos tokens básicos porque uma malha consistente depende de spacing e largura definidos.

Faça uma última execução sem cartões de dados e mantenha apenas o estado vazio:

<section class="grid min-h-64 place-items-center">
  <p>Nenhuma consulta cadastrada.</p>
</section>

O container sem resultados não deve manter altura acidental só para preservar a demonstração; o estado vazio precisa ter conteúdo e alinhamento próprios.