Flexbox e Grid no HTML
Bem-vindo(a) ao post no blog.
🧩 O que é Flexbox e por que ele é importante
💡 Flexbox (Flexible Box Layout) é um sistema para organizar elementos em linha ou coluna, adaptando automaticamente o espaço disponível.
➡️ É ideal para menus, cards, barras de navegação e rodapés.
A ideia central é:
Declarar um contêiner como display: flex; e definir como seus filhos se alinham.🧱 Estrutura básica do Flexbox
📜 Exemplo simples:
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
.container {
display: flex;
background: #f2f2f2;
padding: 10px;
}
.item {
background: #0077cc;
color: white;
padding: 20px;
margin: 10px;
flex: 1;
text-align: center;
}
🔍 Explicando:
● display: flex → ativa o modo flexível no contêiner;
● flex: 1 → faz com que todos os itens se distribuam igualmente no espaço;
● Os itens se tornam responsivos automaticamente, sem precisar calcular larguras.
🧭 Direção dos elementos (flex-direction)
Por padrão, o Flexbox organiza os elementos em linha (row).
Mas podemos mudar isso:
Valor Efeito
row (padrão) → itens em linha horizontal
row-reverse → inverte a ordem horizontal
column → itens em coluna vertical
column-reverse → inverte a ordem vertical
💡 Exemplo:
.container {
display: flex;
flex-direction: column;
}
⚖️ Alinhando com Flexbox
Com Flexbox é fácil centralizar elementos no eixo horizontal e vertical — algo que antes exigia muitos truques.
📦 Principais propriedades:
Propriedade Efeito
justify-content → alinha no eixo principal (horizontal por padrão)
align-items → alinha no eixo transversal (vertical por padrão)
align-content → alinha várias linhas (quando há quebra)
💡 Exemplo:
.container {
display: flex;
justify-content: center; /* Centraliza horizontalmente */
align-items: center; /* Centraliza verticalmente */
height: 300px;
background: #ddd;
}
🧩 Espaço entre itens com Gap
Antes, usávamos margin-right para espaçar elementos — agora basta usar gap:
💡 Exemplo:
.container {
display: flex;
gap: 20px;
}
✅ gap funciona em Flexbox e Grid!
💡 Layout prático com Flexbox — Barra de Navegação
<header class="navbar">
<div class="logo">MeuSite</div>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Serviços</a></li>
<li><a href="#">Contato</a></li>
</ul>
</nav>
</header>
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
background: #222;
color: white;
padding: 10px 20px;
}
.navbar ul {
display: flex;
gap: 20px;
list-style: none;
}
.navbar a {
color: white;
text-decoration: none;
}
🔹 space-between cria espaço entre os itens laterais (logo e menu).
🔹 align-items: center centraliza verticalmente.
🧱 O que é CSS Grid Layout
💡 Grid Layout é uma ferramenta para criar layouts bidimensionais (linhas e colunas).
Diferente do Flexbox, ele não trabalha só com um eixo — é perfeito para grades complexas, dashboards, e páginas estruturadas.
🧩 Estrutura básica de um Grid
<div class="grid-container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.item {
background: #0077cc;
color: white;
padding: 30px;
text-align: center;
}
🔎 Explicando:
● display: grid → ativa o modo Grid;
● grid-template-columns → define colunas (duas colunas iguais 1fr 1fr);
● gap → espaço entre os itens;
● 1fr significa “uma fração do espaço disponível”.
🧠 Definindo Linhas e Colunas com Controle Total
💡 Exemplo com 3 colunas fixas e 2 linhas automáticas:
.grid-container {
display: grid;
grid-template-columns: 200px 1fr 200px;
grid-template-rows: auto auto;
gap: 15px;
}
💬 Isso cria uma estrutura perfeita para sidebar + conteúdo + publicidade.
🧩 Posicionando Itens Especificamente no Grid
Podemos indicar em que linha e coluna cada elemento vai:
.item1 {
grid-column: 1 / 3; /* ocupa duas colunas */
grid-row: 1 / 2; /* fica na primeira linha */
}
🔹 Isso cria layouts flexíveis e controlados sem precisar usar floats ou posições absolutas!
💻 Layout de Página Completo com Grid
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Layout com Grid</title>
<style>
body {
margin: 0;
font-family: sans-serif;
}
.container {
display: grid;
grid-template-areas:
"header header header"
"nav main aside"
"footer footer footer";
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: auto 1fr auto;
height: 100vh;
}
header { grid-area: header; background: #333; color: white; text-align: center; padding: 10px; }
nav { grid-area: nav; background: #444; color: white; padding: 10px; }
main { grid-area: main; padding: 20px; background: #f9f9f9; }
aside { grid-area: aside; background: #eee; padding: 10px; }
footer { grid-area: footer; background: #333; color: white; text-align: center; padding: 10px; }
@media (max-width: 768px) {
.container {
grid-template-areas:
"header"
"nav"
"main"
"aside"
"footer";
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<div class="container">
<header><h1>Site com Grid</h1></header>
<nav>Menu lateral</nav>
<main>Área principal de conteúdo</main>
<aside>Barra lateral</aside>
<footer>Rodapé</footer>
</div>
</body>
</html>
🔹 Esse layout usa grid-template-areas — uma forma elegante de definir o mapa do conteúdo.
🔹 O media query reorganiza o layout para telas pequenas, empilhando uma área sobre a outra.
🧠 Flexbox vs. Grid — Quando Usar em Cada Situação e qual a Escolha Ideal
Layout em uma única dimensão (linha ou coluna) → Flexbox
Layout com duas dimensões (linhas e colunas) → Grid
Menu de navegação, cards, botões alinhados → Flexbox
Estrutura principal de página → Grid
Alinhamentos internos (centro, fim, etc.) → Flexbox
Layout completo de site → Grid + Flexbox combinados
💬 Dica: frequentemente usamos Grid para o esqueleto e Flexbox para o conteúdo interno.
📘 Para um melhor Aprendizado 🎯 Pratique com exercícios, desafios e projetos
💻 Exercício
Crie um arquivo layout_moderno.html contendo:
1. Estrutura HTML com header, menu, conteúdo e rodapé;
2. Use Flexbox para o menu superior (itens alinhados lado a lado);
3. Use CSS Grid para compor o layout principal da página;
4. Adicione media queries que reorganizem tudo para telas menores;
5. Mantenha margens, espaçamentos e cores consistentes.
✅ Desafio Extra:
Crie um conjunto de cards responsivos (3 por linha no desktop, 1 por linha no celular) usando Flexbox ou Grid.
Comentários
Postar um comentário