Linhas Nomeadas e Áreas de Grade Nomeadas
Nomeie linhas e áreas da grade para obter um posicionamento mais legível e fácil de manter.
Linhas Nomeadas e Áreas de Grade Nomeadas é 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.
Nomeando linhas da grade
As linhas da grade podem receber nomes entre colchetes dentro de grid-template-columns e grid-template-rows. As linhas nomeadas tornam o código de posicionamento mais legível do que números brutos.
<div class="layout">
<div class="sidebar">Sidebar</div>
<div class="main">Main</div>
</div>Posicionando itens com linhas nomeadas
Use linhas nomeadas em grid-column e grid-row para obter um posicionamento legível:
<div class="layout">
<div class="sidebar">Sidebar</div>
<div class="main">Main</div>
</div>Nomes de linhas com -start e -end
Quando áreas nomeadas são definidas com grid-template-areas, o CSS cria automaticamente linhas nomeadas com os sufixos -start e -end, que podem ser referenciados.
<div class="layout">
<div class="sidebar">Sidebar</div>
<div class="main">Main</div>
</div>Linhas nomeadas repetidas
Ao usar repeat(), você pode incluir nomes dentro do padrão repetido. As linhas recebem sufixos numerados para eliminar ambiguidades.
<div class="grid">
<div>1</div><div>2</div><div>3</div>
</div>Abrangendo linhas nomeadas
Use linhas nomeadas com span para abranger um número específico de trilhas nomeadas:
<div class="grid">
<div class="header">Header spans 3</div>
<div>A</div><div>B</div><div>C</div>
</div>Recapitulação das áreas nomeadas
As áreas nomeadas (por meio de grid-template-areas) são a abordagem mais legível para posicionar itens:
<div class="page">
<header>Header</header>
<div class="sidebar">Sidebar</div>
<div class="main">Main</div>
<div class="footer">Footer</div>
</div>Linhas nomeadas para layouts complexos
As linhas nomeadas são especialmente úteis em layouts editoriais complexos com vários elementos abrangendo várias trilhas:
<div class="magazine">
<div class="full-bleed">Full bleed banner</div>
<div class="article">Article content</div>
</div>Combinando nomes e números
Linhas nomeadas e números de linhas podem ser misturados livremente na mesma grade:
<div class="layout"><div class="item">Item</div></div>Vários nomes em uma linha
Uma única linha pode ter vários nomes — isso é útil quando uma linha serve tanto como o fim de uma área quanto como o início de outra:
<div class="grid">
<div>Sidebar</div>
<div>Content</div>
</div>Linhas nomeadas implícitas de áreas
Se você definir uma área nomeada chamada "main", as linhas main-start (de coluna e de linha) e main-end serão criadas automaticamente, permitindo usá-las em itens sobrepostos.
Depurando linhas nomeadas no DevTools
O DevTools do Chrome e do Firefox pode exibir as linhas de grade nomeadas como rótulos na sobreposição. Ative os rótulos das linhas no painel Layout para verificar se os nomes estão corretos.
Verificação rápida
Ao definir uma área de grade nomeada como "sidebar" em grid-template-areas, quais nomes de linhas são criados automaticamente?
Recapitulação
Nomeie as linhas da grade entre colchetes dentro das definições de trilhas para obter um posicionamento legível. As áreas nomeadas geram automaticamente nomes de linhas com -start e -end. Uma linha pode ter vários nomes. As linhas nomeadas podem ser combinadas livremente com span e números. Use o DevTools para visualizar as linhas nomeadas como sobreposições.
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 “Linhas Nomeadas e Áreas de Grade Nomeadas” é grátis?
Sim — o texto completo de “Linhas Nomeadas e Áreas de Grade Nomeadas” é 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 “Linhas Nomeadas e Áreas de Grade Nomeadas”?
Nomeie linhas e áreas da grade para obter um posicionamento mais legível e fácil de manter. 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 “Linhas Nomeadas e Áreas de Grade Nomeadas”?
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
- Linhas Nomeadas e Áreas de Grade Nomeadas
- Auto-fit e Auto-fill com minmax
- Grade Implícita e Grid-Auto-Flow
- Subgrid para Conteúdo Aninhado Alinhado