O que é o CSS Grid?
O CSS Grid é um sistema de layout bidimensional que permite criar layouts complexos organizando elementos em linhas e colunas simultaneamente.
É ideal para:
- Layouts de página completos com header, sidebar, main e footer;
- Galerias de imagens com tamanhos variados;
- Dashboards e interfaces complexas;
- Layouts responsivos que se reorganizam em diferentes telas.
Conceitos Básicos
1. Grid Container
O elemento pai que possui display: grid;
Define a estrutura do grid.
2. Grid Items
Os elementos filhos diretos do grid container. São posicionados nas células do grid.
3. Grid Lines (Linhas)
As linhas que dividem o grid. Numeradas a partir de 1.
4. Grid Tracks
O espaço entre duas linhas adjacentes. Podem ser linhas ou colunas.
5. Grid Cells (Células)
A intersecção entre uma linha e uma coluna. O menor espaço no grid.
6. Grid Areas (Áreas)
Um ou mais células agrupadas. Podem ter nomes para facilitar o posicionamento.
Criando um Grid Básico
Primeiro, definimos as colunas e linhas do grid:
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* 3 colunas iguais */
grid-template-rows: 100px 100px; /* 2 linhas de 100px */
gap: 10px;
}
Unidades de Medida no Grid
fr (fraction)
Representa uma fração do espaço disponível:
grid-template-columns: 1fr 2fr 1fr;
Valores Fixos e Auto
Podemos misturar diferentes unidades:
grid-template-columns: 200px auto 1fr;
repeat()
Função para repetir padrões:
grid-template-columns: repeat(4, 1fr);
Posicionamento de Itens
Por Números de Linha
Podemos posicionar itens especificando linhas de início e fim:
.item-span {
grid-column: 1 / 3; /* Da coluna 1 à 3 */
grid-row: 1 / 3; /* Da linha 1 à 3 */
}
Usando span
Especifica quantas células ocupar:
grid-column: span 2; /* Ocupa 2 colunas */
Grid Template Areas
Uma forma visual e intuitiva de definir layouts:
.grid-container {
display: grid;
grid-template-areas:
"header header header"
"nav main aside"
"footer footer footer";
grid-template-columns: 200px 1fr 200px;
grid-template-rows: 60px 1fr 60px;
}
.header { grid-area: header; }
.nav { grid-area: nav; }
.main { grid-area: main; }
.aside { grid-area: aside; }
.footer { grid-area: footer; }
Grid Responsivo
Usando auto-fit e minmax() para layouts adaptativos:
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
Alinhamento no Grid
Alinhamento do Container
justify-items: center; align-items: center;
Alinhamento Individual
justify-self: center; align-self: end;
🧩 Área de Testes
Altere as classes abaixo no arquivo grid.css para experimentar com diferentes propriedades do CSS Grid.