Display Grid e Colunas e Linhas de Modelo
Ative o CSS Grid e defina trilhas de colunas e linhas usando grid-template-columns e rows.
Display Grid e Colunas e Linhas de Modelo é uma aula grátis de CSS Academy no CoddyKit. Esta é a aula 1 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 CSS Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de CSS Academy inclui 4 aulas no total.
Ativando o CSS Grid
O CSS Grid é ativado com display: grid em um contêiner. Seus filhos diretos se tornam itens de grade e são colocados automaticamente nas células.
<div class="layout">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">Item A</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">Item B</div>
<div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">Item C</div>
</div>grid-template-columns
grid-template-columns define o número e o tamanho das colunas. Cada valor cria uma faixa de coluna.
<div class="layout">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">200px column</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">1fr column</div>
<div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">1fr column</div>
</div>grid-template-rows
grid-template-rows define faixas de linhas explícitas. Os itens além das linhas definidas criam linhas implícitas.
<div class="layout" style="min-height:220px;">
<div style="grid-column:span 2;background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header (row: auto)</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main left (row: 1fr)</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main right (row: 1fr)</div>
<div style="grid-column:span 2;background:#7ee78722;border:1px solid #34c759;padding:8px;">Footer (row: auto)</div>
</div>Faixas de colunas e linhas
Cada valor em grid-template-columns ou grid-template-rows cria uma faixa. As faixas podem usar qualquer unidade de tamanho:
- Fixa:
200px,10rem - Flexível:
1fr - Baseada no conteúdo:
auto,min-content,max-content
A unidade fr
fr (unidade fracionária) distribui o espaço disponível depois que os tamanhos fixos são subtraídos. 1fr 2fr cria colunas na proporção de 1:2.
<div class="grid">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">300px fixed</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">1fr (1x share)</div>
<div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">2fr (2x share)</div>
</div>auto nas trilhas
auto em uma trilha define seu tamanho para acomodar o conteúdo. Como coluna, usa o mínimo necessário para sua célula mais larga; como linha, acomoda a célula mais alta.
<div class="sidebar-layout">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Sidebar (auto width)</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main content (1fr fills the rest)</div>
</div>Exemplo de disposição de página
Uma disposição comum de página com três linhas, composta por cabeçalho, conteúdo principal e rodapé:
<div class="page">
<header style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header</header>
<main style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main (fills available space)</main>
<footer style="background:#7ee78722;border:1px solid #34c759;padding:8px;">Footer</footer>
</div>Forma abreviada de grid-template
grid-template combina linhas e colunas:
<div class="grid" style="display:grid;min-height:180px;">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main</div>
<div style="background:#7ee78722;border:1px solid #34c759;padding:8px;">Footer</div>
</div>Inspecionando a grade no DevTools
O DevTools do Chrome e do Firefox pode sobrepor as linhas das trilhas da grade à página. Clique no indicador da grade no painel Elements para visualizar colunas, linhas, espaçamentos e áreas nomeadas.
Escolha entre Grade e Flexbox
Utilize a Grade quando precisar controlar linhas e colunas simultaneamente. Utilize o Flexbox para disposições unidimensionais (uma linha de itens ou uma coluna de itens). Muitas disposições utilizam ambos.
Números das linhas
A Grade numera automaticamente suas linhas começando por 1. Você pode fazer referência a esses números para posicionar itens manualmente. As linhas das colunas vão de 1 a n+1, em que n é a quantidade de colunas.
<div style="display:grid;grid-template-columns:repeat(3, 1fr);gap:8px;">
<div class="header" style="grid-column:1 / -1;background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header — spans all columns (grid-column: 1 / -1)</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Item 2</div>
<div style="background:#7ee78722;border:1px solid #34c759;padding:8px;">Item 3</div>
</div>Verificação rápida
O que grid-template-columns: 200px 1fr 2fr cria?
Recapitulação
display: grid cria um contêiner de grade. grid-template-columns e grid-template-rows definem trilhas. A unidade fr distribui proporcionalmente o espaço restante. auto dimensiona conforme o conteúdo. A Grade é ideal para controlar disposições bidimensionais.
Aprenda CSS com um tutor de IA — grátis
Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.
- Cursos
- 40
- Aulas
- 159
Perguntas Frequentes
A aula “Display Grid e Colunas e Linhas de Modelo” é grátis?
Sim — o texto completo de “Display Grid e Colunas e Linhas de Modelo” é 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 CSS Academy, atualize para CoddyKit PRO. O curso de CSS Academy inclui 4 aulas no total.
O que vou aprender em “Display Grid e Colunas e Linhas de Modelo”?
Ative o CSS Grid e defina trilhas de colunas e linhas usando grid-template-columns e rows. Você pratica CSS 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 CSS Academy?
Nenhuma experiência prévia é necessária. CSS 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 1 de 4.
Quanto tempo leva a aula “Display Grid e Colunas e Linhas de Modelo”?
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 CSS Academy?
Sim. Cada aula de CSS 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
- Display Grid e Colunas e Linhas de Modelo
- A Unidade fr e Repeat
- Gap e Posicionamento no Grid
- Áreas de Modelo do Grid