CSS Grid vs Flex: perceber as diferenças e quando usar

O CSS Grid e o Flexbox são dois métodos de layout em CSS que permitem criar designs complexos e flexíveis para a web. Servem para coisas parecidas, mas cada um tem as suas funcionalidades próprias e os seus casos ideais. Neste CSS Grid vs Flex vamos ver as vantagens e as desvantagens de cada um e quando é preferível usar um ou outro.

Display Grid

Display Grid é um sistema de layout em grelha, pensado para designs assentes numa grelha. Permite-te definir linhas e colunas na tua página e colocar elementos dentro dessas linhas e colunas. Ou seja, consegues alinhar e organizar os elementos da página de forma coerente e estruturada sem esforço.

Aqui fica um exemplo de código HTML/CSS que usa o CSS Grid para criar uma grelha de 3 colunas e 3 linhas:

Código HTML Grid

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
</div>

Código CSS Grid

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 1rem;
    border: 1px dashed #000;
    padding: 5px;
}

.grid-item {
    background: #e74c3c;
    padding: .5rem;
    color: white;
    text-align: center;
}

Display Flex

Código HTML Flex

<div class="flex-container">
  <div class="flex-item">Logo</div>
  <div class="flex-item">Menu</div>
  <div class="flex-item">Champ de Recherche</div>
</div>

Código CSS Flex

.flex-container {
  display: flex;
  justify-content: center;
  gap: 1rem;
  border: 1px dashed #000;
  padding: 5px;
}

.flex-item {
    border: 1px dashed #e74c3c;
    padding: 10px;
}

Comparação entre Flex e Grid

CSS Grid vs Flex: o mesmo código, agora em Grid. Vais perceber a diferença no tamanho relativo dos elementos.

Código HTML Grid vs Flex

<div class="grid-container">
  <div class="grid-item">Logo</div>
  <div class="grid-item">Menu</div>
  <div class="grid-item">Champ de Recherche</div>
</div>

CSS Grid ou Flex: quando usar um ou outro?

Convém perceber as vantagens e as desvantagens de cada ferramenta para escolher a que melhor serve o teu projeto. Em geral, o CSS Grid é ideal para designs assentes numa grelha, como os portefólios e as galerias de imagens, ao passo que o Flexbox é ideal para designs flexíveis e responsivos, como os menus flex e as barras de ferramentas.

Aqui fica um exemplo para explicar melhor: imagina que queres criar o layout da página inicial de um site de e-commerce. Esse layout tem de conter imagens de produtos em destaque, secções para as categorias de produtos, uma barra de navegação e um formulário de pesquisa. Neste caso, podias usar o CSS Grid para organizar as imagens dos produtos em destaque numa grelha e usar o Flexbox para alinhar as secções das categorias de produtos, a barra de navegação e o formulário de pesquisa de forma eficaz.

estas duas ferramentas também podem ser usadas em conjunto para criar designs ainda mais avançados. Por exemplo, podes usar o CSS Grid para criar uma grelha de colunas e linhas e depois o Flexbox para alinhar os elementos dentro de cada célula da grelha. Assim combinas as vantagens de cada ferramenta e chegas a designs mais potentes e mais flexíveis.

Em resumo, o CSS Grid é a ferramenta ideal para designs assentes numa grelha, como os portefólios e as galerias de imagens, ao passo que o Flexbox é a ferramenta ideal para designs flexíveis e responsivos, como os menus flexbox e as barras de ferramentas. Usando os dois em conjunto, consegues criar designs ainda mais avançados para responder às necessidades do teu projeto.