Outra forma de organizar o conteúdo do site é por meio de grids. O Tailwind CSS oferece utilitários avançados para criar layouts em grade. Este capítulo explicará como utilizar os utilitários de grid do Tailwind CSS para definir contêineres e itens de grid.

Contêiner de Grid

Para definir um contêiner de grid, utilize a classe grid. É possível controlar o número de colunas, os espaçamentos entre linhas e colunas, entre outras opções.

Explicação

1. grid: Define o display do elemento como grid;
2. grid-cols-3: Define uma grade com três colunas;
3. gap-4: Adiciona um espaçamento de 1rem (16px) entre os itens da grade.

Grade com Linhas

grid-rows-2: Define uma grade com duas linhas.

Controle de Tamanhos de Colunas e Linhas

É possível controlar os tamanhos das colunas e linhas utilizando as classes grid-cols-{n} e grid-rows-{n}, onde {n} representa o número de colunas ou linhas. Também é possível utilizar unidades fracionárias (fr), porcentagens e outras unidades de medida.

Explicação

1. col-span-2: Ocupa o elemento em duas colunas;
2. col-span-3: Ocupa o elemento em todas as três colunas.

Tamanhos Fixos e Flexíveis

Explicação

1. w-1/2: Define a largura do elemento para 50% do seu contêiner;
2. w-full: Define a largura do elemento para 100% do seu contêiner;
3. w-1/3: Define a largura do elemento para 33,33% do seu contêiner.

Colunas e Linhas do Grid Template

É possível utilizar classes utilitárias específicas para definir o número e a largura das colunas e linhas em seu layout de grid.

Colunas de Grid Personalizadas

Explicação

1. grid-cols-4: Define uma grade com quatro colunas;
2. col-span-1: Ocupa um elemento em uma coluna;
3. col-span-2: Ocupa um elemento em duas colunas.

Linhas de Grade Personalizadas

Explicação

1. grid-rows-3: Define uma grade com três linhas;
2. row-span-2: Ocupa o elemento em duas linhas;
3. row-span-1: Ocupa o elemento em uma linha.

Nota

Consulte a documentação oficial para mais informações sobre o Grid do Tailwind CSS.