Combinando Flexbox e Grid
Use Grid para o layout geral da página e Flexbox para o alinhamento no nível dos componentes, sabendo quando cada ferramenta é a escolha certa.
Combinando Flexbox e Grid é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Frontend Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Frontend Academy inclui 4 aulas no total.
São ferramentas complementares
Flexbox e Grid não são rivais — foram projetados para trabalhar juntos. O padrão típico é usar CSS Grid para a estrutura geral da página e, depois, Flexbox dentro de cada área da grade para organizar o conteúdo do componente.
Layout da página com Grid, componentes com Flex
Defina a estrutura de alto nível da página com Grid. Dentro de cada área da grade, use Flexbox para a organização no nível do componente: links de navegação em uma linha e conteúdo de cartões em uma coluna.
/* Page skeleton */
body {
display: grid;
grid-template-areas: 'header' 'main' 'footer';
grid-template-rows: auto 1fr auto;
min-height: 100vh;
}
/* Component inside grid area */
header {
display: flex;
justify-content: space-between;
align-items: center;
}Padrão de grade de cartões
O padrão clássico: Grid para o layout dos cartões e Flex para o layout interno de cada cartão. Isso garante que os cartões se alinhem na grade enquanto seu conteúdo interno (imagem, título, corpo e rodapé) seja empilhado corretamente.
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
}
.card {
display: flex;
flex-direction: column;
border-radius: 8px;
overflow: hidden;
}
.card-body { flex: 1; } /* push footer down */Padrão de barra de navegação
Uma barra de navegação comum combina os dois. A própria navegação é um contêiner flexível para o logotipo e os links. A seção de links pode ser outro contêiner flexível. Um megamenu pode usar Grid para um layout com várias colunas.
Layout Holy Grail
O layout 'Holy Grail' (cabeçalho, área central com três colunas e rodapé) pode ser criado facilmente com Grid atualmente. As três colunas — barra lateral esquerda, área principal e barra lateral direita — são colunas do Grid; o conteúdo dentro de cada uma usa Flexbox.
.page {
display: grid;
grid-template:
'header header header' auto
'left main right' 1fr
'footer footer footer' auto
/ 200px 1fr 200px;
min-height: 100vh;
}Centralizando qualquer conteúdo — Grid ou Flex
Tanto Grid quanto Flexbox podem centralizar o conteúdo perfeitamente. Grid: place-items: center (abreviação de align-items + justify-items). Flex: justify-content: center; align-items: center.
.center-grid {
display: grid;
place-items: center; /* centers both axes */
min-height: 100vh;
}
.center-flex {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}Layout responsivo com barra lateral
Dispositivos móveis: uma única coluna (navegação no topo). Tablet e telas maiores: barra lateral e conteúdo lado a lado. Grid torna isso declarativo — altere template-areas em uma consulta de mídia.
Padrão de ícone + texto
Um microlayout muito comum: um ícone ao lado de um texto. Flexbox é perfeito para isso porque se trata de uma única linha com alinhamento.
.alert {
display: flex;
align-items: flex-start;
gap: 12px;
}
.alert-icon { flex-shrink: 0; width: 20px; }
.alert-body { flex: 1; }Quando escolher um deles
Grid quando: você pensa em linhas E colunas, precisa alinhar itens em várias trilhas ou está criando a estrutura de uma página. Flex quando: você pensa em uma única direção, os itens devem diminuir e aumentar ou você está organizando uma linha de botões ou uma pilha de itens.
Não complique o projeto
Às vezes, um elemento de bloco simples com max-width e margin: auto é melhor que uma grade complexa. Nem todo layout precisa de Grid. Use a ferramenta mais simples que resolva o problema.
Depurando problemas de layout
No DevTools: clique nos indicadores de grid/flex no painel Elements para sobrepor as linhas da grade ou os contornos dos itens flexíveis. Isso torna visível a estrutura de layout que normalmente fica invisível e é indispensável para diagnosticar desalinhamentos.
Verificação rápida
Qual combinação de ferramentas de layout é mais comum, respectivamente, para layouts no nível da página e no nível dos componentes?
Recapitulação: combinando Grid e Flex
Grid e Flexbox são complementares. Use Grid para a estrutura bidimensional da página. Use Flexbox para o conteúdo interno unidimensional dos componentes. place-items: center em uma grade centraliza tudo. flex-direction: column + flex: 1 no corpo do cartão empurra os rodapés dos cartões para baixo. Depure com os indicadores de sobreposição do DevTools.
Perguntas Frequentes
A aula “Combinando Flexbox e Grid” é grátis?
Sim — o texto completo de “Combinando Flexbox e Grid” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Frontend Academy, atualize para CoddyKit PRO. O curso de Frontend Academy inclui 4 aulas no total.
O que vou aprender em “Combinando Flexbox e Grid”?
Use Grid para o layout geral da página e Flexbox para o alinhamento no nível dos componentes, sabendo quando cada ferramenta é a escolha certa. Você pratica Frontend Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Frontend Academy?
Nenhuma experiência prévia é necessária. Frontend Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.
Quanto tempo leva a aula “Combinando Flexbox e Grid”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Frontend Academy?
Sim. Cada aula de Frontend Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Aprofundamento em Flexbox: alinhamento, quebra e ordem
- CSS Grid: template-areas auto-fit minmax
- Combinando Flexbox e Grid
- Variáveis CSS para temas