⏱️2 min read · 402 words
Grade CSSé o sistema de layout mais poderoso em CSS. Em 2026, o suporte do navegador é de 99%+ e CSS Grid é usado para tudo, desde layouts de nível de página até grades de cartões e painéis complexos. Este guia cobre o Grid desde os padrões básicos até os avançados.
📋 Table of Contents
Noções básicas de grade
/* Enable grid */
.container {
display: grid;
/* 3 equal columns */
grid-template-columns: 1fr 1fr 1fr;
/* Or shorthand */
grid-template-columns: repeat(3, 1fr);
/* Rows */
grid-template-rows: auto 1fr auto;
/* Gap between cells */
gap: 1rem;
}<div class="container">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
<div>Item 5</div>
<div>Item 6</div>
</div>Áreas de modelo de grade (layout semântico)
.page {
display: grid;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
grid-template-columns: 250px 1fr;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
gap: 1rem;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }Abrangendo Colunas e Linhas
.featured {
grid-column: 1 / 3; /* span 2 columns */
/* or: */
grid-column: span 2;
}
.hero {
grid-row: 1 / 3; /* span 2 rows */
}
.full-width {
grid-column: 1 / -1; /* span all columns */
}Preenchimento automático e ajuste automático (grade responsiva)
/* Cards that auto-wrap: minimum 280px, fill available space */
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1.5rem;
}
/* auto-fill: keeps empty column tracks
auto-fit: collapses empty tracks */
.card-grid-fit {
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}Linhas de grade nomeadas
.layout {
display: grid;
grid-template-columns:
[full-start] 1rem
[content-start] 1fr
[content-end] 1rem
[full-end];
}
.bleed-full {
grid-column: full-start / full-end;
}
.content {
grid-column: content-start / content-end;
}Grid vs Flexbox: quando usar qual
- Grade CSS:Layouts bidimensionais (linhas E colunas), estrutura de páginas, dashboards, layouts de cartões complexos
- Caixa flexível:Unidimensional (linha OU coluna), barras de navegação, grupos de botões, centralização de conteúdo
- Ambos juntos:Grade para layout de página, Flexbox para itens dentro de células de grade
Grade responsiva sem consultas de mídia
/* Works at any viewport width — no breakpoints needed */
.responsive-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
gap: 1rem;
}Conclusão
CSS Grid é uma das adições mais poderosas ao CSS. Usargrid-template-areaspara layout de página semântica,repeat(auto-fill, minmax(...))para grades de cartões responsivas e linhas nomeadas para layouts editoriais complexos. Combinado com o Flexbox, você pode construir qualquer layout sem uma estrutura CSS.
🔗 Share this article
✍️ Leave a Comment