Introdução

Por décadas, o layout de websites dependeu de ferramentas limitadas, como a propriedade float e a posição absoluta. Essas técnicas, embora poderosas, exigiam hacks complexos e muitas vezes resultavam em código difícil de manter. Com o surgimento do CSS moderno, o desenvolvimento front-end tornou-se muito mais elegante. Dois dos principais destaques dessa revolução são o CSS Flexbox e o CSS Grid.

Muitos desenvolvedores iniciantes — e até experientes — frequentemente ficam na dúvida: "Qual devo usar?". A resposta curta é: ambos são ótimos, mas têm propósitos diferentes. Para dominar o design responsivo, é essencial entender a filosofia por trás de cada um.

Neste artigo, vamos explorar como o Flexbox e o Grid funcionam, suas principais características e, o mais importante, um guia prático de quando aplicar cada tecnologia no seu próximo projeto.

A Filosofia: 1D vs 2D

Para entender a diferença fundamental, precisamos olhar para a terminologia usada pelos criadores do CSS:

• Flexbox (One-dimensional): Focado em um único eixo. Ele organiza itens em uma linha (row) ou em uma coluna (column).
• CSS Grid (Two-dimensional): Focado em dois eixos simultaneamente. Ele organiza itens em linhas e colunas ao mesmo tempo.

Essa distinção não é apenas teórica; ela define o tipo de problema que cada ferramenta resolve melhor.

Flexbox: O Rei do Alinhamento

O Flexbox foi projetado para resolver problemas de alinhamento e distribuição de espaço. Ele é ideal quando você quer que os itens dentro de um container sejam flexíveis — ou seja, mudem de tamanho para ocupar o espaço disponível — ou quando você precisa centralizar itens perfeitamente.

Quando usar Flexbox?

1. Navegação (Menus): É a aplicação clássica. Você quer que os itens do menu ocupem igualmente o espaço disponível ou que estejam alinhados à direita/esquerda.
2. Alinhamento Central: Posicionar um cartão ou modal exatamente no meio da tela é trivial com Flexbox.
3. Filas de Itens: Quando você tem uma lista de produtos ou botões que devem se ajustar ao tamanho do texto dentro deles.

Exemplo Prático: Menu de Navegação

Imagine que você quer criar um menu horizontal onde os itens se esticam para preencher a largura da barra, independentemente do número de itens.

<nav class="navegacao">
  <a href="#inicio">Início</a>
  <a href="#produtos">Produtos</a>
  <a href="#sobre">Sobre</a>
  <a href="#contato">Contato</a>
</nav>

Aqui está o CSS necessário para fazer isso funcionar:

.navegacao {
  display: flex;            /* Ativa o Flexbox */
  justify-content: space-between; /* Distribui os itens com espaço entre eles */
  align-items: center;      /* Alinha verticalmente ao centro */
  background-color: #333;
  padding: 10px;
}

.navegacao a {
  color: white;
}