Atributo CSS grid-template-areas

Definição e uso

O atributo grid-template-areas define áreas na disposição da grade.

Você pode usar grid-area Nomeie os itens da grade da propriedade, então cite esse nome no atributo grid-template-areas.

Cada área é definida por aspas. Use pontos para citar itens de grade sem nome.

Veja também:

Tutorial CSS:Projeto de grade CSS

Manual de referência CSS:Propriedade grid-area

Manual de referência CSS:Propriedade grid-template

Exemplo

Exemplo 1

FAÇA o item "myArea" atravessar duas colunas em um layout de grade de cinco colunas:

.item1 {
  grid-area: myArea;
}
.grid-container {
  display: grid;
  grid-template-areas: "myArea myArea . . .";
}

Experimente você mesmo

Exemplo 2

Especifica duas linhas, onde "item1" atravessa as duas primeiras colunas nas duas primeiras linhas (em um layout de grade de cinco colunas):

.item1 {
  grid-area: myArea;
}
.grid-container {
  display: grid;
  grid-template-areas:
    'myArea myArea . . .'
    'myArea myArea . . .';
}

Experimente você mesmo

Exemplo 3

NOMEIE todos os itens e crie um modelo de página web pronto:

.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }
.grid-container {
  display: grid;
  grid-template-areas:
    'header header header header header';
    'menu main main main right right';
    'menu footer footer footer footer';
}

Experimente você mesmo

Sintaxe do CSS

grid-template-areas: none|itemnames;

Valor do atributo

Valor Descrição
none Valor padrão. Áreas de grade não nomeadas (grid areas).
itemnames Especifica a sequência de como cada coluna e cada linha deve ser exibida.

Detalhes técnicos

Valor padrão: none
Herança: Não
Produção de animação: Suportado. Veja:Propriedades relacionadas a animação.
Versão: Módulo de Layout de Grid CSS Level 1
Sintaxe do JavaScript: object.style.gridTemplateAreas=". . . myArea myArea"

Suporte do navegador

Os números na tabela indicam a primeira versão do navegador que suporta completamente essa propriedade.

Chrome IE / Edge Firefox Safari Opera
57 16 52 10 44