Como criar layouts complexos e adaptativos com CSS
Bem-vindo(a) ao post no blog.
👉 Layout Responsivo Completo com Grid, Flexbox e Media Queries.
🧱 A Estrutura do Projeto
Nosso layout será composto por:
● Header (cabeçalho) — com logo e navegação;
● Sidebar (menu lateral) — que se recolhe no mobile;
● Main (conteúdo principal) — onde ficam cards e artigos;
● Footer (rodapé) — com créditos e links simples.
Visualizando mentalmente:
+----------------------------+
| HEADER |
+------------+---------------+
| SIDEBAR | MAIN |
+------------+---------------+
| FOOTER |
+----------------------------+
📄 Criando o HTML Base
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Layout Responsivo Completo</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<header>Meu Site</header>
<aside>
<nav>
<a href="#">Início</a>
<a href="#">Serviços</a>
<a href="#">Portfólio</a>
<a href="#">Contato</a>
</nav>
</aside>
<main>
<h1>Bem-vindo!</h1>
<section class="cards">
<div class="card">Card 1</div>
<div class="card">Card 2</div>
<div class="card">Card 3</div>
<div class="card">Card 4</div>
</section>
</main>
<footer>© 2024 - Layout Responsivo</footer>
</div>
</body>
</html>
🎨 Declarando Variáveis Globais
📄 style.css
:root {
--cor-primaria: #0077ff;
--cor-secundaria: #00c6ff;
--cor-bg: #f4f7fb;
--cor-branco: #fff;
--cor-texto: #333;
--raio: 12px;
--sombra: 0 8px 20px rgba(0,0,0,0.08);
--trans: all 0.3s ease;
--espacamento: 20px;
--largura-sidebar: 220px;
}
Essas variáveis permitem ajustar o layout inteiro com facilidade — se um cliente pedir “mude o tema pra roxo”, basta alterar uma única linha.
🧱 Criando a Grade com CSS Grid
Nosso container geral vai usar Grid para definir as áreas.
body {
font-family: 'Poppins', sans-serif;
background: var(--cor-bg);
color: var(--cor-texto);
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.container {
display: grid;
grid-template-areas:
"header header"
"aside main"
"footer footer";
grid-template-columns: var(--largura-sidebar) 1fr;
grid-template-rows: 70px auto 60px;
width: 90%;
max-width: 1200px;
background: var(--cor-branco);
border-radius: var(--raio);
box-shadow: var(--sombra);
overflow: hidden;
}
💡 Aqui usamos áreas nomeadas e definimos o layout principal da página.
🧭 Estilizando Cada Seção
header {
grid-area: header;
background: linear-gradient(to right, var(--cor-primaria), var(--cor-secundaria));
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
font-weight: 600;
}
aside {
grid-area: aside;
background: #e5efff;
padding: var(--espacamento);
}
main {
grid-area: main;
padding: var(--espacamento);
}
footer {
grid-area: footer;
background: var(--cor-primaria);
color: white;
display: flex;
justify-content: center;
align-items: center;
}
🧭 Menu Lateral com Flexbox
nav {
display: flex;
flex-direction: column;
gap: 12px;
}
nav a {
text-decoration: none;
color: var(--cor-texto);
background: #f8faff;
padding: 10px 15px;
border-radius: var(--raio);
transition: var(--trans);
}
nav a:hover {
background: var(--cor-primaria);
color: white;
}
👉 O menu lateral se adapta facilmente e responde a eventos de hover com transições suaves.
📦 Cards com Flexbox Interno
.cards {
display: flex;
flex-wrap: wrap;
gap: var(--espacamento);
}
.card {
flex: 1 1 250px;
background: #ffffff;
box-shadow: var(--sombra);
padding: 20px;
border-radius: var(--raio);
text-align: center;
transition: transform 0.3s;
}
.card:hover {
transform: translateY(-8px);
}
💡 Assim, os cards se ajustam automaticamente conforme o espaço disponível — sem precisar de Grid dentro da seção.
📱 Responsividade com Media Queries
Agora adaptaremos o layout para telas menores.
/* Tablets */
@media (max-width: 900px) {
.container {
grid-template-columns: 180px 1fr;
}
}
/* Celulares */
@media (max-width: 650px) {
.container {
grid-template-areas:
"header"
"main"
"aside"
"footer";
grid-template-columns: 1fr;
grid-template-rows: 70px auto auto 60px;
}
aside {
text-align: center;
}
nav {
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
}
nav a {
flex: 1 1 45%;
}
}
💥 Resultado:
● Em telas grandes, sidebar à esquerda;
● Em tablets, sidebar menor;
● Em smartphones, sidebar vai para baixo do conteúdo e o menu vira horizontal responsivo!
🧠 Relembrando o Que Acontece Aqui
✔️ Grid define o layout principal (estrutura global);
✔️ Flexbox organiza menus e cards (componentes internos);
✔️ Media Queries tornam tudo adaptável;
✔️ Variáveis controlam o design globalmente.
💬 É exatamente assim que os layouts profissionais reais são construídos.
🧩 Melhorando com um Tema Escuro (Bônus)
Podemos reaproveitar variáveis para adicionar um modo escuro:
body.dark {
--cor-bg: #111827;
--cor-branco: #1f2937;
--cor-texto: #f3f4f6;
--sombra: 0 8px 20px rgba(0,0,0,0.4);
}
Depois, com JavaScript simples:
document.body.classList.toggle('dark');
💡 Troque o tema e o layout inteiro muda automaticamente.
📘 Para um melhor Aprendizado 🎯 Pratique com exercícios, desafios e projetos
💎 Dicas Profissionais
Comentários
Postar um comentário