Atributo CSS grid-area

Definition and usage

grid-area attribute size of the grid item and its position in the grid layout, which is a shorthand attribute for the following properties:

The grid-area attribute can also be used to assign names to grid items. Then, you can access the grid-template-areas Attribute references named grid items. See the following examples.

See also:

CSS Tutorial:CSS Grid Layout

Instance

Example 1

To make "item1" start at row 2, column 1, and span 2 rows and 3 columns:

.item1 {
  grid-area: 2 / 1 / span 2 / span 3;
}

Experimente pessoalmente

Tip:More examples are provided at the bottom of the page.

CSS syntax

grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end | itemname;

Attribute value

Value Description
grid-row-start Define from which row to display the item.
grid-column-start Define from which column to display the item.
grid-row-end Especifique na qual linha de linha o item deve parar de ser exibido ou por quantas linhas deve cruzar.
grid-column-end Especifique na qual linha de coluna o item deve parar de ser exibido ou por quantas colunas deve cruzar.
itemname Define o item do projeto da grade.

Detalhes técnicos

Valor padrão: auto / auto / auto / auto
Herança: Não
Produção de animação: Suportado. Veja:Propriedades relacionadas a animação.
Versão: Módulo de Layout de Grade CSS Level 1
Sintaxe do JavaScript: object.style.gridArea="1 / 2 / span 2 / span 3"

Mais exemplos

Exemplo 2

Item1 é nomeado 'myArea' e ocupa todos os cinco colunas em um layout de grade de cinco colunas:

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

Experimente pessoalmente

Exemplo 3

Faça 'myArea' ocupar duas colunas em um layout de grade de cinco colunas (pontos são para itens sem nome):

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

Experimente pessoalmente

Exemplo 4

Faça 'item1' ocupar duas colunas e duas linhas:

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

Experimente pessoalmente

Exemplo 5

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 {
  grid-template-areas:
    'header header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer footer';
}

Experimente pessoalmente

Suporte do navegador

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

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