Combinando Flex-Grow e Grid: O Jeito Ninja de Criar Layouts Flexíveis
Depois de instigado pela @DIO Community resolvi escrever sobre como usar o flex-grow e grid pois bem
Montar um layout na web é tipo montar um quebra-cabeça — se as peças não encaixam direito, vira bagunça! 😅 Mas é aí que entram CSS Grid e Flexbox como nossos grandes aliados, cada um com seu superpoder.
- Grid organiza a estrutura geral da página, tipo o mapa de um prédio.
- Flexbox ajusta os elementos dentro dessas áreas, como móveis que se adaptam ao espaço disponível.
Agora, como juntar os dois? Simples!
Pensa num painel administrativo:
- Grid separa a página em duas colunas — uma sidebar fixa e um conteúdo flexível.
- Flexbox + flex-grow fazem esse conteúdo crescer e ocupar o espaço certinho, sem dor de cabeça.
Com essa dupla, você cria layouts responsivos, bonitos e que se ajustam sozinhos.
Segue codigo do gif acima
.layout {
display: grid;
grid-template-columns: 250px auto;
height: 100vh;
}
.sidebar {
background-color: #333;
color: white;
padding: 20px;
}
.main-content {
display: flex;
flex-direction: column;
padding: 20px;
}
.article {
flex-grow: 1;
background: lightgray;
padding: 20px;
margin-bottom: 10px;
border-radius: 8px;
}
.footer {
background: #222;
color: white;
text-align: center;
padding: 10px;
}
<body>
<div class="layout">
<aside class="sidebar">
<h2>Menu</h2>
<ul>
<li><a href="#" style="color: white;">Página Inicial</a></li>
<li><a href="#" style="color: white;">Sobre</a></li>
<li><a href="#" style="color: white;">Contato</a></li>
</ul>
</aside>
<main class="main-content">
<section class="article" style="display: flex; gap: 16px; align-items: flex-start;">
<img src="./1602623210335.jpg" alt="" style="width: 320px; object-fit: contain">
<div style="display: flex; flex-direction: column; gap: 8px;">
<h2>Pablo Gomes</h2>
<a>
Community Expert - Digital Innovation One Inc.Digital Innovation One Inc.
</a>
<p style="color: #515151;">
Selecionado entre +2000 Devs, como Community Expert <br>
Sou voluntário do programa da DioX Squad promovido pela DIO com a responsabilidade de compartilhar as
melhores
práticas em desenvolvimento de software para mais de 170.000 membros da comunidade, com acesso a rede global
de mentores para impulsionar o meu desenvolvimento em: liderança técnica, arquitetura escalável,
desenvolvimento ágil, protagonismo, colaboração e transformação socioeconômica através da tecnologia.
</div>
</section>
<section class="article" style="display: flex; gap: 16px; align-items: flex-start;">
<img src="./1590549988066.jpg" style="width: 320px; object-fit: contain" alt="">
<div style="display: flex; flex-direction: column; gap: 8px;">
<h2>DIOX SQUAD 2.0
</h2>
<p style="color: #515151;">
Esse entra pra galeria dos mais importantes, porque a foi a primeira porta que Deus abriu pra mim como DEV.
<br>
Meus sinceros agradecimentos a DIO e ao Iglá Generoso por nos proporcionar momentos maravilhosos, onde pude
aprender e conhecer pessoas sensacionais a cada semana tanto nas mentorias, quanto nos squads...
Vocês tem uma parcela de mérito por tudo que tenho conquistado.</p>
</div>
</section>
<footer class="footer">
<p>© 2025 Meu Site</p>
</footer>
</main>
</div>
</body>
- Resumindo, o Grid define a estrutura geral da página (sidebar fixa + conteúdo fluido). Flexbox (flex-grow) dentro do conteúdo faz os artigos crescerem conforme necessário, mantendo tudo equilibrado e bonito.
Essa combinação permite um layout flexível, responsivo e bem distribuído! 🚀
