Lição 13 de 30

CSS Grid no Tailwind: Colunas e Linhas — Web Academy

Enquanto o Flexbox é especialista em resolver fluxos de elementos em uma única direção (unidimensional: linha ou coluna), o CSS Grid é a ferramenta soberana para estruturar layouts bidimensionais — onde linhas e colunas precisam ser alinhadas rigorosamente de forma simultânea. No Tailwind CSS, a sintaxe do Grid é incrivelmente limpa: com utilitários como grid, grid-cols-1 md:grid-cols-3 e suporte moderno ao subgrid, você ergue painéis SaaS, catálogos de e-commerce e Bento Grids em minutos.

📑 Índice do Conteúdo

1. Ativando a Grade: grid vs. inline-grid

Para inaugurar um contexto de grade CSS, você aplica a classe grid no elemento pai (equivalente a display: grid;). Se precisar que a própria grade se comporte como um elemento inline, utilize inline-grid.

2. O Sistema de Colunas: grid-cols-{1 a 12}

O Tailwind oferece um sistema pré-calibrado de 1 a 12 colunas que divide o espaço automaticamente usando a fração flexível fr:

Classe	CSS Nativo Gerado	Uso Típico
`grid-cols-1`	`repeat(1, minmax(0, 1fr))`	Padrão móvel (uma coluna empilhada).
`grid-cols-2`	`repeat(2, minmax(0, 1fr))`	Tablets ou comparativos lado a lado.
`grid-cols-3`	`repeat(3, minmax(0, 1fr))`	Tabelas de preços, planos e features.
`grid-cols-4`	`repeat(4, minmax(0, 1fr))`	Painéis analíticos e métricas Bento.
`grid-cols-12`	`repeat(12, minmax(0, 1fr))`	Sistema clássico de 12 colunas para portais.

A Blindagem do minmax(0, 1fr): Repare que o Tailwind não gera apenas repeat(3, 1fr), mas sim minmax(0, 1fr). Isso impede um dos piores bugs do CSS Grid nativo: quando um texto longo, tabela ou imagem tenta estourar a coluna, o minmax(0, ...) força o conteúdo a respeitar o limite geométrico da célula!

🧪 Quer testar grids bidimensionais no Playground IDE?
Abrir no Playground IDE →

3. Templates Customizados com Valores Arbitrários

Se o seu layout exige colunas assimétricas (por exemplo, uma barra lateral fixa de 260px e o conteúdo central expansivo), basta utilizar colchetes:

HTML5 5 linhas

<!-- Grade com sidebar de 260px fixa e área central elástica -->
<div class="grid grid-cols-[260px_1fr] gap-6">
    <aside class="bg-slate-900 p-6 rounded-2xl">Barra Lateral Fixa</aside>
    <main class="bg-slate-900 p-6 rounded-2xl">Conteúdo Principal Expansivo</main>
</div>

<!-- Grade com sidebar de 260px fixa e área central elástica -->
<div class="grid grid-cols-[260px_1fr] gap-6">
<aside class="bg-slate-900 p-6 rounded-2xl">Barra Lateral Fixa</aside>
<main class="bg-slate-900 p-6 rounded-2xl">Conteúdo Principal Expansivo</main>
</div>

4. A Mágica do CSS Subgrid (grid-cols-subgrid)

O Subgrid é uma das maiores adições da especificação CSS moderna. Ele resolve o problema clássico de cartões com alturas de conteúdo desiguais:

Quando temos três cartões lado a lado, se o título de um deles ocupar 3 linhas e os outros ocuparem apenas 1, os botões na base do cartão ficavam desalinhados. Ao aplicar grid-rows-subgrid no cartão filho, ele herda as linhas da grade mãe, fazendo com que títulos, descrições e botões de todos os cartões fiquem nivelados horizontalmente na mesma linha exata!

HTML5 9 linhas

<!-- Grade Mãe com 3 colunas -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
    <!-- Cartão que herda as linhas via subgrid -->
    <div class="grid grid-rows-subgrid row-span-3 bg-slate-900 p-6 rounded-2xl border border-slate-800">
        <h3 class="text-xl font-bold text-white">Título do Cartão</h3>
        <p class="text-slate-400 text-sm my-4">Descrição que pode ter qualquer tamanho sem desalinhar os botões.</p>
        <button class="w-full py-2.5 bg-sky-500 text-white font-semibold rounded-xl">Acessar</button>
    </div>
</div>

<!-- Grade Mãe com 3 colunas -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<!-- Cartão que herda as linhas via subgrid -->
<div class="grid grid-rows-subgrid row-span-3 bg-slate-900 p-6 rounded-2xl border border-slate-800">
<h3 class="text-xl font-bold text-white">Título do Cartão</h3>
<p class="text-slate-400 text-sm my-4">Descrição que pode ter qualquer tamanho sem desalinhar os botões.</p>
<button class="w-full py-2.5 bg-sky-500 text-white font-semibold rounded-xl">Acessar</button>
</div>
</div>

5. Exemplo Prático: Painel Bento Grid Responsivo

Veja a construção de uma grade que se adapta de 1 coluna no celular para 2 no tablet e 4 no computador desktop com gap uniforme:

HTML5 31 linhas

<div class="max-w-7xl mx-auto p-6">
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
        <!-- Cartão de Métrica 1 -->
        <div class="bg-slate-900 border border-slate-800 rounded-3xl p-6 shadow-xl">
            <span class="text-xs font-bold uppercase tracking-wider text-slate-400">Acessos Hoje</span>
            <h4 class="text-3xl font-extrabold text-white mt-2">48.290</h4>
            <span class="text-xs text-emerald-400 font-semibold mt-2 inline-block">↑ +14.2% vs ontem</span>
        </div>
 
        <!-- Cartão de Métrica 2 -->
        <div class="bg-slate-900 border border-slate-800 rounded-3xl p-6 shadow-xl">
            <span class="text-xs font-bold uppercase tracking-wider text-slate-400">Tempo Médio</span>
            <h4 class="text-3xl font-extrabold text-white mt-2">4m 18s</h4>
            <span class="text-xs text-emerald-400 font-semibold mt-2 inline-block">↑ +8.5% engajamento</span>
        </div>
 
        <!-- Cartão de Métrica 3 -->
        <div class="bg-slate-900 border border-slate-800 rounded-3xl p-6 shadow-xl">
            <span class="text-xs font-bold uppercase tracking-wider text-slate-400">Taxa de Rejeição</span>
            <h4 class="text-3xl font-extrabold text-white mt-2">24.1%</h4>
            <span class="text-xs text-emerald-400 font-semibold mt-2 inline-block">↓ -3.8% retenção excelente</span>
        </div>
 
        <!-- Cartão de Métrica 4 -->
        <div class="bg-slate-900 border border-slate-800 rounded-3xl p-6 shadow-xl">
            <span class="text-xs font-bold uppercase tracking-wider text-slate-400">Conversões IDE</span>
            <h4 class="text-3xl font-extrabold text-white mt-2">1.842</h4>
            <span class="text-xs text-sky-400 font-semibold mt-2 inline-block">↑ 99.8% Core Web Vitals</span>
        </div>
    </div>
</div>

<div class="max-w-7xl mx-auto p-6">
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
<!-- Cartão de Métrica 1 -->
<div class="bg-slate-900 border border-slate-800 rounded-3xl p-6 shadow-xl">
<span class="text-xs font-bold uppercase tracking-wider text-slate-400">Acessos Hoje</span>
<h4 class="text-3xl font-extrabold text-white mt-2">48.290</h4>
<span class="text-xs text-emerald-400 font-semibold mt-2 inline-block">↑ +14.2% vs ontem</span>
</div>
<!-- Cartão de Métrica 2 -->
<div class="bg-slate-900 border border-slate-800 rounded-3xl p-6 shadow-xl">
<span class="text-xs font-bold uppercase tracking-wider text-slate-400">Tempo Médio</span>
<h4 class="text-3xl font-extrabold text-white mt-2">4m 18s</h4>
<span class="text-xs text-emerald-400 font-semibold mt-2 inline-block">↑ +8.5% engajamento</span>
</div>
<!-- Cartão de Métrica 3 -->
<div class="bg-slate-900 border border-slate-800 rounded-3xl p-6 shadow-xl">
<span class="text-xs font-bold uppercase tracking-wider text-slate-400">Taxa de Rejeição</span>
<h4 class="text-3xl font-extrabold text-white mt-2">24.1%</h4>
<span class="text-xs text-emerald-400 font-semibold mt-2 inline-block">↓ -3.8% retenção excelente</span>
</div>
<!-- Cartão de Métrica 4 -->
<div class="bg-slate-900 border border-slate-800 rounded-3xl p-6 shadow-xl">
<span class="text-xs font-bold uppercase tracking-wider text-slate-400">Conversões IDE</span>
<h4 class="text-3xl font-extrabold text-white mt-2">1.842</h4>
<span class="text-xs text-sky-400 font-semibold mt-2 inline-block">↑ 99.8% Core Web Vitals</span>
</div>
</div>
</div>

⚖️ A Regra do Arquiteto: Flexbox vs. CSS Grid

Qual modelo escolher? Siga esta regra definitiva: utilize Flexbox quando o tamanho do elemento depender do seu próprio conteúdo interno (como uma barra de botões ou itens de navegação). Utilize CSS Grid quando você deseja impor uma geometria rígida onde o esqueleto da página dita o tamanho dos elementos (como vitrines de produtos, murais de fotos e painéis de métricas).

6. Ferramentas Correlatas da Rede Web-ZoneWare

Para praticar e validar grades responsivas bidimensionais:

Playground Web IDE: Ambiente interativo para compor painéis Bento Grid em tempo real.
Limpador e Formatador CSS: Audite regras de grid-template-columns e repeat.
Lição 32 do Curso de CSS: Relembre a teoria pura do CSS Grid nativo da especificação W3C.
Lição 11 de Tailwind CSS: Compare a abordagem bidimensional do Grid com o fluxo unidimensional do Flexbox.

7. Links Oficiais e Documentação de Referência

Consulte os manuais da documentação internacional:

🛠️ Laboratório Prático & Prática Imediata

Aplique o que você aprendeu nesta lição

Utilize nossas ferramentas online gratuitas para experimentar os conceitos ou teste o código ao vivo no Playground IDE.

💻 Desenvolvedor & Código

Editor de Códigos Web Online

Ambiente com destaque de sintaxe para você testar tags, tabelas e scripts na hora.

Abrir Ferramenta Online

⚡ Live Code Studio

Playground Web Online

Escreva seu código HTML, CSS ou JavaScript e veja o resultado renderizado ao vivo no navegador com zero configuração.

⚡ Codificar no Playground IDE