Arquitetura de Layout: Flexbox e Grid

Dominando o posicionamento de elementos na página web.

A Necessidade de um Sistema de Layout

Antigamente, organizar elementos em um site era uma tarefa complexa que exigia truques técnicos. Hoje, o CSS possui dois sistemas oficiais para resolver isso:

Unidimensional (Linha ou Coluna)

O foco é organizar itens em uma única direção por vez. Ideal para componentes menores.

Conhecido como: Flexbox.
Bidimensional (Grade Completa)

O foco é organizar itens em linhas e colunas simultaneamente. Ideal para a estrutura total da página.

Conhecido como: Grid Layout.

Flexbox: O Sistema Elástico

Imagine uma corda elástica onde você pendura itens. Você pode esticar a corda, empurrar os itens para as pontas ou centralizá-los com facilidade.

.container {
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  gap: 10px;
}
1
2
3

Grid: A Estante de Livros

Diferente do Flexbox, o Grid permite criar divisórias fixas de colunas e linhas, como se fosse uma estante onde cada item tem seu lugar exato.

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}
A
B
C
D
E
F

Uso Conjunto: O Melhor dos Dois Mundos

Na prática, utilizamos o Grid para a estrutura geral da página e o Flexbox para alinhar os elementos dentro de cada parte.

Observe o exemplo ao lado:

  1. O Grid define as 3 linhas (Header, Main, Footer).
  2. O Flexbox organiza o Logo e o Menu dentro do Header.
/* Estrutura da Página (GRID) */
.pagina {
  display: grid;
  grid-template-rows: auto 1fr auto;
}

/* Itens Internos (FLEX) */
.header {
  display: flex;
  justify-content: space-between;
}
LOGO
  • Início
  • Fotos
  • Contato
Conteúdo Principal (Grid Row 2)
Rodapé da Página

Simulação de um layout real de site.

Qual sistema devo escolher?

Não existe um sistema melhor que o outro, mas sim ferramentas diferentes para objetivos diferentes.

Característica Flexbox Grid
Dimensão Unidimensional (1D) Bidimensional (2D)
Melhor uso Alinhamento de itens (menus, botões). Estrutura total da página (seções, grades).
Alinhamento Baseado no conteúdo interno. Baseado no espaço externo definido.
Dica de Mercado: Inicie o projeto definindo o esqueleto com Grid e utilize o Flexbox para os detalhes. Isso garante um código muito mais organizado e fácil de manter.