EnglishEnglish العربيةالعربية PortuguêsPortuguês Japanese日本語

Layout Grid no Tailwind CSS: Contêineres Grid e Controle de Linhas/Colunas

Contêiner Grid e Definição de Colunas

Grid é um modelo de layout bidimensional. Use grid para criar um contêiner grid e grid-cols-* para definir o número de colunas.

Exemplo

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Demonstração de Contêiner Grid e Definição de Colunas</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- grid-cols-2 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">grid-cols-2</h3>
      <div class="grid grid-cols-2 gap-4 bg-gray-100 p-4 rounded">
        <div class="bg-blue-500 text-white p-4 rounded text-center">1</div>
        <div class="bg-blue-600 text-white p-4 rounded text-center">2</div>
        <div class="bg-blue-700 text-white p-4 rounded text-center">3</div>
        <div class="bg-blue-800 text-white p-4 rounded text-center">4</div>
      </div>
    </div>

    <!-- grid-cols-3 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">grid-cols-3</h3>
      <div class="grid grid-cols-3 gap-4 bg-gray-100 p-4 rounded">
        <div class="bg-green-500 text-white p-4 rounded text-center">1</div>
        <div class="bg-green-600 text-white p-4 rounded text-center">2</div>
        <div class="bg-green-700 text-white p-4 rounded text-center">3</div>
        <div class="bg-green-800 text-white p-4 rounded text-center">4</div>
        <div class="bg-green-900 text-white p-4 rounded text-center">5</div>
        <div class="bg-green-950 text-white p-4 rounded text-center">6</div>
      </div>
    </div>

    <!-- grid-cols-4 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">grid-cols-4</h3>
      <div class="grid grid-cols-4 gap-4 bg-gray-100 p-4 rounded">
        <div class="bg-purple-500 text-white p-4 rounded text-center">1</div>
        <div class="bg-purple-600 text-white p-4 rounded text-center">2</div>
        <div class="bg-purple-700 text-white p-4 rounded text-center">3</div>
        <div class="bg-purple-800 text-white p-4 rounded text-center">4</div>
        <div class="bg-purple-900 text-white p-4 rounded text-center">5</div>
        <div class="bg-purple-950 text-white p-4 rounded text-center">6</div>
        <div class="bg-purple-500 text-white p-4 rounded text-center">7</div>
        <div class="bg-purple-600 text-white p-4 rounded text-center">8</div>
      </div>
    </div>

    <!-- Colunas responsivas -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Responsivo: grid-cols-1 md:grid-cols-2 lg:grid-cols-3</h3>
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 bg-gray-100 p-4 rounded">
        <div class="bg-orange-500 text-white p-4 rounded text-center">1</div>
        <div class="bg-orange-600 text-white p-4 rounded text-center">2</div>
        <div class="bg-orange-700 text-white p-4 rounded text-center">3</div>
        <div class="bg-orange-800 text-white p-4 rounded text-center">4</div>
        <div class="bg-orange-900 text-white p-4 rounded text-center">5</div>
        <div class="bg-orange-950 text-white p-4 rounded text-center">6</div>
      </div>
    </div>
  </div>
</body>
</html>
▶ Experimente

Referência de classes de colunas do grid:

Classe Valor CSS Descrição
grid-cols-1 grid-template-columns: repeat(1, minmax(0, 1fr)) 1 coluna
grid-cols-2 grid-template-columns: repeat(2, minmax(0, 1fr)) 2 colunas
grid-cols-3 grid-template-columns: repeat(3, minmax(0, 1fr)) 3 colunas
grid-cols-4 grid-template-columns: repeat(4, minmax(0, 1fr)) 4 colunas
grid-cols-12 grid-template-columns: repeat(12, minmax(0, 1fr)) 12 colunas (grid clássico)
grid-cols-none grid-template-columns: none Sem colunas fixas

CSS Tradicional vs Tailwind A abordagem tradicional exige definir display: grid e grid-template-columns no CSS, enquanto o Tailwind usa classes utilitárias como grid e grid-cols-3 diretamente no HTML.

💡 Dica: grid-cols-12 é o sistema de grid clássico de 12 colunas. Combinado com col-span-*, você pode compor layouts de vários larguras de forma flexível.

Definição de Linhas (grid-rows)

grid-rows-* define o número e a altura das linhas do grid.

Exemplo

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Demonstração de Definição de Linhas do Grid</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- grid-rows-3 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">grid-rows-3</h3>
      <div class="grid grid-cols-3 grid-rows-3 gap-4 bg-gray-100 p-4 rounded h-64">
        <div class="bg-blue-500 text-white p-2 rounded text-center text-sm">1,1</div>
        <div class="bg-blue-600 text-white p-2 rounded text-center text-sm">1,2</div>
        <div class="bg-blue-700 text-white p-2 rounded text-center text-sm">1,3</div>
        <div class="bg-blue-800 text-white p-2 rounded text-center text-sm">2,1</div>
        <div class="bg-blue-900 text-white p-2 rounded text-center text-sm">2,2</div>
        <div class="bg-blue-950 text-white p-2 rounded text-center text-sm">2,3</div>
        <div class="bg-blue-500 text-white p-2 rounded text-center text-sm">3,1</div>
        <div class="bg-blue-600 text-white p-2 rounded text-center text-sm">3,2</div>
        <div class="bg-blue-700 text-white p-2 rounded text-center text-sm">3,3</div>
      </div>
    </div>

    <!-- Alturas de linha personalizadas -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">grid-rows-[auto_1fr_auto] (Cabeçalho-Conteúdo-Rodapé)</h3>
      <div class="grid grid-rows-[auto_1fr_auto] gap-4 bg-gray-100 p-4 rounded h-64">
        <div class="bg-green-500 text-white p-4 rounded text-center">Cabeçalho (auto)</div>
        <div class="bg-green-600 text-white p-4 rounded text-center">Conteúdo (1fr)</div>
        <div class="bg-green-700 text-white p-4 rounded text-center">Rodapé (auto)</div>
      </div>
    </div>
  </div>
</body>
</html>
▶ Experimente

CSS Tradicional vs Tailwind A abordagem tradicional exige definir grid-template-rows no CSS, enquanto o Tailwind usa classes utilitárias como grid-rows-3 diretamente no HTML. Para alturas de linha personalizadas, use a sintaxe de valor arbitrário grid-rows-[auto_1fr_auto].

Abrangência de Colunas (col-span)

col-span-* faz com que itens do grid se estendam por várias colunas.

Exemplo

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Demonstração de Abrangência de Colunas</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- Layout clássico -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Layout Clássico de Três Colunas (col-span)</h3>
      <div class="grid grid-cols-12 gap-4 bg-gray-100 p-4 rounded">
        <div class="col-span-12 bg-blue-600 text-white p-4 rounded text-center">Cabeçalho (col-span-12)</div>
        <div class="col-span-3 bg-blue-500 text-white p-4 rounded text-center">Barra lateral (col-span-3)</div>
        <div class="col-span-6 bg-blue-700 text-white p-4 rounded text-center">Conteúdo principal (col-span-6)</div>
        <div class="col-span-3 bg-blue-500 text-white p-4 rounded text-center">Barra lateral (col-span-3)</div>
        <div class="col-span-12 bg-blue-600 text-white p-4 rounded text-center">Rodapé (col-span-12)</div>
      </div>
    </div>

    <!-- Abrangências mistas -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Abrangências Mistas</h3>
      <div class="grid grid-cols-4 gap-4 bg-gray-100 p-4 rounded">
        <div class="col-span-2 bg-green-500 text-white p-4 rounded text-center">col-span-2</div>
        <div class="col-span-1 bg-green-600 text-white p-4 rounded text-center">col-span-1</div>
        <div class="col-span-1 bg-green-700 text-white p-4 rounded text-center">col-span-1</div>
        <div class="col-span-1 bg-green-800 text-white p-4 rounded text-center">col-span-1</div>
        <div class="col-span-3 bg-green-900 text-white p-4 rounded text-center">col-span-3</div>
      </div>
    </div>

    <!-- col-span-full -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">col-span-full (Abranger Todas as Colunas)</h3>
      <div class="grid grid-cols-3 gap-4 bg-gray-100 p-4 rounded">
        <div class="col-span-full bg-purple-600 text-white p-4 rounded text-center">col-span-full</div>
        <div class="bg-purple-500 text-white p-4 rounded text-center">1</div>
        <div class="bg-purple-600 text-white p-4 rounded text-center">2</div>
        <div class="bg-purple-700 text-white p-4 rounded text-center">3</div>
      </div>
    </div>
  </div>
</body>
</html>
▶ Experimente

CSS Tradicional vs Tailwind A abordagem tradicional exige definir grid-column: span 2 / span 2 no CSS, enquanto o Tailwind usa col-span-2 diretamente no HTML. col-span-full é equivalente a abranger todas as colunas.

Abrangência de Linhas (row-span)

row-span-* faz com que itens do grid se estendam por várias linhas.

Exemplo

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Demonstração de Abrangência de Linhas</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- row-span -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Exemplo de row-span</h3>
      <div class="grid grid-cols-3 grid-rows-3 gap-4 bg-gray-100 p-4 rounded h-64">
        <div class="row-span-3 bg-blue-500 text-white p-4 rounded text-center flex items-center justify-center">row-span-3</div>
        <div class="bg-blue-600 text-white p-4 rounded text-center">1,2</div>
        <div class="bg-blue-700 text-white p-4 rounded text-center">1,3</div>
        <div class="bg-blue-800 text-white p-4 rounded text-center">2,2</div>
        <div class="bg-blue-900 text-white p-4 rounded text-center">2,3</div>
        <div class="bg-blue-600 text-white p-4 rounded text-center">3,2</div>
        <div class="bg-blue-700 text-white p-4 rounded text-center">3,3</div>
      </div>
    </div>

    <!-- Aplicação prática: layout de painel -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Layout de Painel (Dashboard)</h3>
      <div class="grid grid-cols-4 grid-rows-3 gap-4 bg-gray-100 p-4 rounded h-80">
        <div class="col-span-4 bg-green-600 text-white p-4 rounded text-center flex items-center justify-center">Barra de navegação (col-span-4)</div>
        <div class="row-span-2 bg-green-500 text-white p-4 rounded text-center flex items-center justify-center">Barra lateral (row-span-2)</div>
        <div class="col-span-3 bg-green-700 text-white p-4 rounded text-center flex items-center justify-center">Conteúdo principal (col-span-3)</div>
        <div class="col-span-3 bg-green-800 text-white p-4 rounded text-center flex items-center justify-center">Rodapé (col-span-3)</div>
      </div>
    </div>
  </div>
</body>
</html>
▶ Experimente

CSS Tradicional vs Tailwind A abordagem tradicional exige definir grid-row: span 3 / span 3 no CSS, enquanto o Tailwind usa row-span-3 diretamente no HTML.

💡 Dica: Combinar col-span-* e row-span-* permite criar layouts de grid complexos como painéis (dashboards), páginas em estilo revista e muito mais.

Posicionamento por Linhas do Grid (col-start/row-start)

col-start-* e row-start-* permitem posicionar itens com precisão em posições específicas das linhas do grid.

Exemplo

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Demonstração de Posicionamento por Linhas do Grid</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- col-start -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Posicionamento com col-start</h3>
      <div class="grid grid-cols-6 gap-4 bg-gray-100 p-4 rounded">
        <div class="col-start-1 col-end-3 bg-blue-500 text-white p-4 rounded text-center">col-start-1 col-end-3</div>
        <div class="col-start-4 col-end-7 bg-blue-700 text-white p-4 rounded text-center">col-start-4 col-end-7</div>
        <div class="col-start-2 col-span-4 bg-blue-600 text-white p-4 rounded text-center">col-start-2 col-span-4</div>
      </div>
    </div>

    <!-- row-start -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Posicionamento com row-start</h3>
      <div class="grid grid-cols-3 grid-rows-3 gap-4 bg-gray-100 p-4 rounded h-64">
        <div class="row-start-1 row-end-3 bg-green-500 text-white p-4 rounded text-center flex items-center justify-center">row-start-1 row-end-3</div>
        <div class="row-start-2 col-start-2 col-span-2 bg-green-700 text-white p-4 rounded text-center flex items-center justify-center">row-start-2 col-start-2</div>
        <div class="row-start-3 col-start-2 col-span-2 bg-green-800 text-white p-4 rounded text-center flex items-center justify-center">row-start-3 col-start-2</div>
      </div>
    </div>

    <!-- Posicionamento preciso -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Posicionamento Preciso de Itens do Grid</h3>
      <div class="grid grid-cols-4 grid-rows-4 gap-4 bg-gray-100 p-4 rounded h-64">
        <div class="col-start-1 row-start-1 bg-purple-500 text-white p-2 rounded text-center text-sm">(1,1)</div>
        <div class="col-start-3 row-start-1 bg-purple-600 text-white p-2 rounded text-center text-sm">(3,1)</div>
        <div class="col-start-2 row-start-2 col-span-2 row-span-2 bg-purple-700 text-white p-2 rounded text-center text-sm flex items-center justify-center">(2,2) span 2x2</div>
        <div class="col-start-4 row-start-3 bg-purple-800 text-white p-2 rounded text-center text-sm">(4,3)</div>
        <div class="col-start-1 row-start-4 col-span-4 bg-purple-900 text-white p-2 rounded text-center text-sm">Largura Total na Parte Inferior</div>
      </div>
    </div>
  </div>
</body>
</html>
▶ Experimente

Referência de classes de posicionamento por linhas do grid:

Classe Valor CSS Descrição
col-start-1 grid-column-start: 1 Começar na linha de coluna 1
col-end-3 grid-column-end: 3 Terminar na linha de coluna 3
col-span-2 grid-column: span 2 / span 2 Abranger 2 colunas
row-start-1 grid-row-start: 1 Começar na linha de linha 1
row-end-3 grid-row-end: 3 Terminar na linha de linha 3
row-span-2 grid-row: span 2 / span 2 Abranger 2 linhas

CSS Tradicional vs Tailwind A abordagem tradicional exige definir grid-column-start, grid-column-end, etc. no CSS, enquanto o Tailwind usa classes utilitárias como col-start-1 e col-end-3 diretamente no HTML.

⚠️ Nota: As linhas do grid são numeradas a partir de 1. col-start-1 significa começar na primeira linha de coluna, e col-end-3 significa terminar na terceira linha de coluna (abrangendo 2 colunas).

Controle de Espaçamento (Gap)

O layout Grid também usa gap-* para controlar o espaçamento entre linhas e colunas.

Exemplo

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Demonstração de Controle de Gap do Grid</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- gap -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">gap-4 (Espaçamento Uniforme)</h3>
      <div class="grid grid-cols-3 gap-4 bg-gray-100 p-4 rounded">
        <div class="bg-blue-500 text-white p-4 rounded text-center">1</div>
        <div class="bg-blue-600 text-white p-4 rounded text-center">2</div>
        <div class="bg-blue-700 text-white p-4 rounded text-center">3</div>
        <div class="bg-blue-800 text-white p-4 rounded text-center">4</div>
        <div class="bg-blue-900 text-white p-4 rounded text-center">5</div>
        <div class="bg-blue-950 text-white p-4 rounded text-center">6</div>
      </div>
    </div>

    <!-- gap-x gap-y -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">gap-x-8 gap-y-2 (Controle Independente)</h3>
      <div class="grid grid-cols-3 gap-x-8 gap-y-2 bg-gray-100 p-4 rounded">
        <div class="bg-green-500 text-white p-4 rounded text-center">1</div>
        <div class="bg-green-600 text-white p-4 rounded text-center">2</div>
        <div class="bg-green-700 text-white p-4 rounded text-center">3</div>
        <div class="bg-green-800 text-white p-4 rounded text-center">4</div>
        <div class="bg-green-900 text-white p-4 rounded text-center">5</div>
        <div class="bg-green-950 text-white p-4 rounded text-center">6</div>
      </div>
    </div>

    <!-- Diferentes tamanhos de gap -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Diferentes Tamanhos de Gap</h3>
      <div class="space-y-4">
        <div>
          <p class="text-sm text-gray-600 mb-2">gap-1 (4px)</p>
          <div class="grid grid-cols-4 gap-1 bg-gray-100 p-4 rounded">
            <div class="bg-purple-500 text-white p-2 rounded text-center text-sm">1</div>
            <div class="bg-purple-600 text-white p-2 rounded text-center text-sm">2</div>
            <div class="bg-purple-700 text-white p-2 rounded text-center text-sm">3</div>
            <div class="bg-purple-800 text-white p-2 rounded text-center text-sm">4</div>
          </div>
        </div>
        <div>
          <p class="text-sm text-gray-600 mb-2">gap-8 (32px)</p>
          <div class="grid grid-cols-4 gap-8 bg-gray-100 p-4 rounded">
            <div class="bg-purple-500 text-white p-2 rounded text-center text-sm">1</div>
            <div class="bg-purple-600 text-white p-2 rounded text-center text-sm">2</div>
            <div class="bg-purple-700 text-white p-2 rounded text-center text-sm">3</div>
            <div class="bg-purple-800 text-white p-2 rounded text-center text-sm">4</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
▶ Experimente

CSS Tradicional vs Tailwind A abordagem tradicional exige definir column-gap e row-gap no CSS, enquanto o Tailwind usa gap-x-8 e gap-y-2 diretamente no HTML. gap-4 define o espaçamento para ambas as direções de uma só vez.

Direção do Fluxo do Grid (grid-flow)

grid-flow-* controla a direção do algoritmo de posicionamento automático.

Exemplo

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Demonstração de Direção do Fluxo do Grid</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- grid-flow-row -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">grid-flow-row (Padrão)</h3>
      <div class="grid grid-cols-3 grid-flow-row gap-4 bg-gray-100 p-4 rounded">
        <div class="bg-blue-500 text-white p-4 rounded text-center">1</div>
        <div class="bg-blue-600 text-white p-4 rounded text-center">2</div>
        <div class="bg-blue-700 text-white p-4 rounded text-center">3</div>
        <div class="bg-blue-800 text-white p-4 rounded text-center">4</div>
        <div class="bg-blue-900 text-white p-4 rounded text-center">5</div>
      </div>
    </div>

    <!-- grid-flow-col -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">grid-flow-col</h3>
      <div class="grid grid-rows-3 grid-flow-col gap-4 bg-gray-100 p-4 rounded h-48">
        <div class="bg-green-500 text-white p-4 rounded text-center">1</div>
        <div class="bg-green-600 text-white p-4 rounded text-center">2</div>
        <div class="bg-green-700 text-white p-4 rounded text-center">3</div>
        <div class="bg-green-800 text-white p-4 rounded text-center">4</div>
        <div class="bg-green-900 text-white p-4 rounded text-center">5</div>
      </div>
    </div>

    <!-- grid-flow-dense -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">grid-flow-dense (Preencher Lacunas)</h3>
      <div class="grid grid-cols-4 grid-flow-dense gap-4 bg-gray-100 p-4 rounded">
        <div class="col-span-2 bg-purple-500 text-white p-4 rounded text-center">col-span-2</div>
        <div class="bg-purple-600 text-white p-4 rounded text-center">1</div>
        <div class="bg-purple-700 text-white p-4 rounded text-center">2</div>
        <div class="col-span-2 bg-purple-800 text-white p-4 rounded text-center">col-span-2</div>
        <div class="bg-purple-900 text-white p-4 rounded text-center">3</div>
        <div class="bg-purple-600 text-white p-4 rounded text-center">4</div>
      </div>
    </div>
  </div>
</body>
</html>
▶ Experimente

CSS Tradicional vs Tailwind A abordagem tradicional exige definir grid-auto-flow no CSS, enquanto o Tailwind usa classes utilitárias como grid-flow-row, grid-flow-col e grid-flow-dense diretamente no HTML.

💡 Dica: grid-flow-dense tenta preencher lacunas no grid, sendo adequado para layouts em estilo masonry e cenários semelhantes.

Dimensionamento Automático (auto-cols/auto-rows)

auto-cols-* e auto-rows-* controlam o tamanho das faixas implícitas do grid.

Exemplo

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Demonstração de Dimensionamento Automático</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- auto-cols-min -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">auto-cols-min</h3>
      <div class="grid grid-flow-col auto-cols-min gap-4 bg-gray-100 p-4 rounded">
        <div class="bg-blue-500 text-white px-2 py-4 rounded text-center">Curto</div>
        <div class="bg-blue-600 text-white px-4 py-4 rounded text-center">Médio</div>
        <div class="bg-blue-700 text-white px-6 py-4 rounded text-center">Conteúdo mais longo</div>
      </div>
    </div>

    <!-- auto-cols-max -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">auto-cols-max</h3>
      <div class="grid grid-flow-col auto-cols-max gap-4 bg-gray-100 p-4 rounded">
        <div class="bg-green-500 text-white px-2 py-4 rounded text-center">Curto</div>
        <div class="bg-green-600 text-white px-4 py-4 rounded text-center">Médio</div>
        <div class="bg-green-700 text-white px-6 py-4 rounded text-center">Conteúdo mais longo</div>
      </div>
    </div>

    <!-- auto-cols-fr -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">auto-cols-fr (Espaço Igual)</h3>
      <div class="grid grid-flow-col auto-cols-fr gap-4 bg-gray-100 p-4 rounded">
        <div class="bg-purple-500 text-white p-4 rounded text-center">1</div>
        <div class="bg-purple-600 text-white p-4 rounded text-center">2</div>
        <div class="bg-purple-700 text-white p-4 rounded text-center">3</div>
      </div>
    </div>
  </div>
</body>
</html>
▶ Experimente

Referência de classes de dimensionamento automático:

Classe Valor CSS Descrição
auto-cols-min grid-auto-columns: min-content Largura mínima do conteúdo
auto-cols-max grid-auto-columns: max-content Largura máxima do conteúdo
auto-cols-fr grid-auto-columns: minmax(0, 1fr) Espaço igual
auto-cols-auto grid-auto-columns: auto Automático (padrão)
auto-rows-min grid-auto-rows: min-content Altura mínima do conteúdo
auto-rows-max grid-auto-rows: max-content Altura máxima do conteúdo
auto-rows-fr grid-auto-rows: minmax(0, 1fr) Altura igual
auto-rows-auto grid-auto-rows: auto Automático (padrão)

CSS Tradicional vs Tailwind A abordagem tradicional exige definir grid-auto-columns e grid-auto-rows no CSS, enquanto o Tailwind usa classes utilitárias como auto-cols-min e auto-rows-fr diretamente no HTML.

Controle de Alinhamento

O layout Grid oferece controle de alinhamento em múltiplos níveis: justify-items/items/place-items controlam como os itens são alinhados dentro de suas células do grid.

Exemplo

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Demonstração de Controle de Alinhamento do Grid</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- justify-items -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">justify-items-center (Centralizar Horizontalmente)</h3>
      <div class="grid grid-cols-3 justify-items-center gap-4 bg-gray-100 p-4 rounded">
        <div class="bg-blue-500 text-white px-2 py-4 rounded w-20 text-center">1</div>
        <div class="bg-blue-600 text-white px-2 py-4 rounded w-20 text-center">2</div>
        <div class="bg-blue-700 text-white px-2 py-4 rounded w-20 text-center">3</div>
      </div>
    </div>

    <!-- items -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">items-center (Centralizar Verticalmente)</h3>
      <div class="grid grid-cols-3 items-center gap-4 bg-gray-100 p-4 rounded h-32">
        <div class="bg-green-500 text-white px-4 py-2 rounded text-center">Baixo</div>
        <div class="bg-green-600 text-white px-4 py-6 rounded text-center">Alto</div>
        <div class="bg-green-700 text-white px-4 py-4 rounded text-center">Médio</div>
      </div>
    </div>

    <!-- place-items -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">place-items-center (Centralizar Horizontal e Verticalmente)</h3>
      <div class="grid grid-cols-3 place-items-center gap-4 bg-gray-100 p-4 rounded h-32">
        <div class="bg-purple-500 text-white px-4 py-2 rounded">1</div>
        <div class="bg-purple-600 text-white px-4 py-2 rounded">2</div>
        <div class="bg-purple-700 text-white px-4 py-2 rounded">3</div>
      </div>
    </div>

    <!-- justify-items-stretch -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">justify-items-stretch (Padrão)</h3>
      <div class="grid grid-cols-3 justify-items-stretch gap-4 bg-gray-100 p-4 rounded">
        <div class="bg-orange-500 text-white p-4 rounded text-center">1</div>
        <div class="bg-orange-600 text-white p-4 rounded text-center">2</div>
        <div class="bg-orange-700 text-white p-4 rounded text-center">3</div>
      </div>
    </div>
  </div>
</body>
</html>
▶ Experimente

Referência de classes de alinhamento:

Classe Valor CSS Descrição
justify-items-start justify-items: start Alinhar ao início horizontal
justify-items-center justify-items: center Centralizado horizontalmente
justify-items-end justify-items: end Alinhar ao final horizontal
justify-items-stretch justify-items: stretch Esticar para preencher horizontalmente
items-start align-items: start Alinhar ao início vertical
items-center align-items: center Centralizado verticalmente
items-end align-items: end Alinhar ao final vertical
items-stretch align-items: stretch Esticar para preencher verticalmente
place-items-center place-items: center Centralizado horizontal e verticalmente
place-items-stretch place-items: stretch Esticar para preencher ambos os eixos

CSS Tradicional vs Tailwind A abordagem tradicional exige definir justify-items e align-items separadamente no CSS, enquanto o Tailwind alcança o centralizado horizontal e vertical com uma única classe place-items-center.

💡 Dica: place-items-center é a solução de centralização mais utilizada e é mais concisa que o items-center justify-center do Flexbox.

Exemplo Abrangente

Combinando todos os conceitos acima, vamos criar um layout Grid completo.

Exemplo

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Exemplo Abrangente de Grid</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-6xl mx-auto space-y-8">
    <!-- Layout de painel (dashboard) -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Layout de Painel (Dashboard)</h3>
      <div class="grid grid-cols-4 grid-rows-4 gap-4 bg-gray-100 p-4 rounded h-96">
        <!-- Navegação superior -->
        <div class="col-span-4 bg-blue-600 text-white p-4 rounded flex items-center justify-between">
          <span class="font-bold">Painel</span>
          <span>Avatar do Usuário</span>
        </div>
        <!-- Barra lateral -->
        <div class="row-span-3 bg-blue-500 text-white p-4 rounded">
          <nav class="space-y-2">
            <div class="p-2 bg-blue-400 rounded">Visão Geral</div>
            <div class="p-2 hover:bg-blue-400 rounded">Análises</div>
            <div class="p-2 hover:bg-blue-400 rounded">Configurações</div>
          </nav>
        </div>
        <!-- Cards de estatísticas -->
        <div class="bg-green-500 text-white p-4 rounded flex flex-col justify-center">
          <div class="text-2xl font-bold">1.234</div>
          <div class="text-sm">Total de Usuários</div>
        </div>
        <div class="bg-green-600 text-white p-4 rounded flex flex-col justify-center">
          <div class="text-2xl font-bold">567</div>
          <div class="text-sm">Usuários Ativos</div>
        </div>
        <div class="bg-green-700 text-white p-4 rounded flex flex-col justify-center">
          <div class="text-2xl font-bold">89%</div>
          <div class="text-sm">Taxa de Crescimento</div>
        </div>
        <!-- Conteúdo principal -->
        <div class="col-span-3 row-span-2 bg-white p-4 rounded border">
          <h4 class="font-semibold mb-2">Gráfico de Dados</h4>
          <div class="h-full bg-gray-50 rounded flex items-center justify-center text-gray-400">
            Área do Gráfico
          </div>
        </div>
      </div>
    </div>

    <!-- Layout em estilo revista -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Layout em Estilo Revista</h3>
      <div class="grid grid-cols-4 gap-4 bg-gray-100 p-4 rounded">
        <div class="col-span-2 row-span-2 bg-gradient-to-br from-purple-500 to-purple-700 text-white p-6 rounded flex flex-col justify-end">
          <h3 class="text-2xl font-bold mb-2">Manchete Principal</h3>
          <p class="text-sm opacity-90">Este é o conteúdo de notícia mais importante</p>
        </div>
        <div class="bg-orange-500 text-white p-4 rounded">
          <h4 class="font-semibold mb-2">Notícia 2</h4>
          <p class="text-sm">Breve descrição...</p>
        </div>
        <div class="bg-orange-600 text-white p-4 rounded">
          <h4 class="font-semibold mb-2">Notícia 3</h4>
          <p class="text-sm">Breve descrição...</p>
        </div>
        <div class="bg-orange-700 text-white p-4 rounded">
          <h4 class="font-semibold mb-2">Notícia 4</h4>
          <p class="text-sm">Breve descrição...</p>
        </div>
        <div class="bg-orange-800 text-white p-4 rounded">
          <h4 class="font-semibold mb-2">Notícia 5</h4>
          <p class="text-sm">Breve descrição...</p>
        </div>
      </div>
    </div>

    <!-- Grid responsivo -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Grid Responsivo</h3>
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 bg-gray-100 p-4 rounded">
        <div class="bg-blue-500 text-white p-6 rounded text-center">1</div>
        <div class="bg-blue-600 text-white p-6 rounded text-center">2</div>
        <div class="bg-blue-700 text-white p-6 rounded text-center">3</div>
        <div class="bg-blue-800 text-white p-6 rounded text-center">4</div>
        <div class="bg-blue-900 text-white p-6 rounded text-center">5</div>
        <div class="bg-blue-950 text-white p-6 rounded text-center">6</div>
        <div class="bg-blue-500 text-white p-6 rounded text-center">7</div>
        <div class="bg-blue-600 text-white p-6 rounded text-center">8</div>
      </div>
    </div>
  </div>
</body>
</html>
▶ Experimente

CSS Tradicional vs Tailwind A abordagem tradicional exige escrever muito CSS para layouts complexos como painéis e páginas em estilo revista, enquanto o Tailwind realiza isso diretamente no HTML usando classes utilitárias de grid, combinadas de forma flexível com col-span-* e row-span-*.

❓ Perguntas Frequentes

P: Quando devo usar Grid vs Flexbox? R: Use Flexbox para layouts unidimensionais (linha ou coluna única) e Grid para layouts bidimensionais (linhas e colunas). Barras de navegação e listas de cards funcionam bem com Flexbox; painéis e grids de imagens funcionam bem com Grid. Ambos podem ser aninhados juntos.

P: Qual a diferença entre grid-cols-12 e grid-cols-3? R: grid-cols-12 cria um grid de 12 colunas que requer col-span-* para definir a largura dos itens. grid-cols-3 cria um grid simples de 3 colunas de largura igual. O primeiro é mais flexível, o segundo é mais simples.

P: Como criar um grid responsivo? R: Use prefixos responsivos como grid-cols-1 md:grid-cols-2 lg:grid-cols-3 para alternar a quantidade de colunas em diferentes breakpoints. Você também pode usar auto-fill e minmax() para responsividade automática.

P: Qual a diferença entre gap e padding? R: gap controla o espaçamento entre itens do grid e não inclui margens externas. padding controla o preenchimento interno do contêiner, envolvendo todos os itens. Eles são tipicamente usados juntos: gap para espaçamento entre itens e padding para margens do contêiner.

📖 Resumo

📝 Exercícios

  1. ⭐ Crie um layout de grid de 3 colunas de largura igual usando grid grid-cols-3 gap-4 para exibir 6 cards

  2. ⭐⭐ Crie um layout de grid clássico de 12 colunas com cabeçalho (col-span-12), barra lateral (col-span-3), conteúdo principal (col-span-6) e rodapé (col-span-12)

  3. ⭐⭐⭐ Crie um layout de painel (dashboard) usando grid-cols-4 grid-rows-4 com barra de navegação superior (col-span-4), barra lateral (row-span-3), cards de estatísticas e uma área de conteúdo principal

100%