Propriedade de Posicionamento de Área do Grid
Última atualização: 2026-09-13
grid-area Propriedade de Posicionamento de Área do Grid
grid-area é um shorthand que posiciona um item do grid definindo os quatro valores de uma vez: grid-row-start, grid-column-start, grid-row-end e grid-column-end. Funciona com números de linha de grade para posicionamento preciso ou com uma área nomeada definida em grid-template-areas. É a propriedade mais flexível para o posicionamento no grid.
| Categoria | |
|---|---|
| Valor Inicial | auto |
| Herdado | Não |
| Aplica-se A | |
| Tipo de Animação | |
| Versão CSS | CSS3 |
| Status | Padrão |
📝 Sintaxe
grid-area: <grid-line> [ / <grid-line> ]{0,3};⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
<grid-line> [ / <grid-line> ]{0,3} | Valor | Shorthand de área do grid |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| grid-area | ✓ v57 | ✓ v16 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| Suportado em todos os principais navegadores | |||||
Dica： Quando o valor de grid-area é um nome de área, o item é posicionado na área correspondente definida em grid-template-areas.
Dica： Com quatro valores, a ordem é: grid-row-start / grid-column-start / grid-row-end / grid-column-end.
❓ Perguntas Frequentes
QO shorthand grid-area é o mesmo que um nome de área?
AEstão relacionados, mas são diferentes. A propriedade grid-area é usada em um item do grid para posicioná-lo; seu valor pode ser quatro números de linha de grade ou um único nome de área. As strings como "header" em um modelo grid-template-areas são identificadores de área. Escrever grid-area: header referencia a área nomeada definida no modelo — as duas estão conectadas pelo nome da área.
QO que é melhor, áreas nomeadas ou números de linha de grade?
ANão há vencedor absoluto. As áreas nomeadas são as mais legíveis e servem para layouts de página inteira: uma vez que os nomes são escritos em grid-template-areas, um filho precisa apenas de grid-area: header para o posicionamento, e mudar o layout significa editar apenas o modelo do contêiner. Os números de linha de grade são mais precisos para ajustes locais de abrangência, como um cartão que precisa cruzar duas colunas. Projetos reais geralmente misturam ambos: áreas nomeadas para o esqueleto da página e linhas de grade para os detalhes internos.
QO que significam os quatro valores em grid-area: 1 / 1 / 3 / 3?
AOs quatro valores correspondem, na ordem, a grid-row-start / grid-column-start / grid-row-end / grid-column-end: o item começa na interseção da linha 1 com a coluna 1 e termina na interseção da linha 3 com a coluna 3, ocupando um retângulo de 2 por 2. Lembre-se da ordem "início da linha, início da coluna, fim da linha, fim da coluna"; os valores finais assumem auto quando omitidos.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
Posicionamento de Linha do Grid
Posiciona um item do grid verticalmente
Posicionamento de Coluna do Grid
Posiciona um item do grid horizontalmente
