.jpg)
Seja muito bem-vindo à Academy Code Christ!
🌍 Academy Code Christ está disponível em vários idiomas.
Fique à vontade para usar o tradutor na Barra lateral (Sidebar) e aprender no seu idioma.
%20-%20Copia.png)
.png)
.png)
Para facilitar seu aprendizado, utilize o Code Editor da Mr Digitals, um editor online que permite escrever códigos em HTML, CSS e JavaScript e visualizar os resultados diretamente no navegador.
Nesta aula, você vai conhecer os conceitos fundamentais de Flexbox e CSS Grid, entender as diferenças entre essas duas técnicas de layout e aprender como utilizá-las para organizar elementos e criar páginas web responsivas.
Ao final, você terá uma base para escolher a técnica mais adequada para diferentes tipos de layouts em seus projetos.
🧩 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.
📚 Continue aprendendo HTML:
📚 Continue aprendendo HTML:
Siga para a próxima etapa e continue avançando na sua jornada pelo desenvolvimento web!
🟠 Etapa 01 👉 O que é HTML e como a Web funciona
🟠 Etapa 02 👉 Textos, Parágrafos e Quebras de Linha
🟠 Etapa 03 👉 Listas
🟠 Etapa 04 👉 Imagens, Vídeos e Mídias Incorporadas
🟠 Etapa 05 👉 Links e Navegação no HTML
🟠 Etapa 06 👉 Formulários e Interatividade
🟠 Etapa 07 👉 Estrutura Semântica
🟠 Etapa 08 👉 Tabelas: Estrutura e Organização de Dados
🟠 Etapa 09 👉 Layouts e Responsividade (com CSS introdutório)
🟠 Etapa 10 👉 Você está nessa Aula
.png)
.png)
Postar um comentário