Propriedade de área de grade CSS
Exemplo
Faça com que "item1" comece na linha 2, coluna 1, e abranja 2 linhas e 3 colunas:
.item1 {
grid-area: 2 / 1 / span 2 / span 3;
}
Mais exemplos de "Experimente você mesmo" abaixo.
Definição e uso
A grid-area
propriedade especifica o tamanho e a localização de um item de grade em um layout de grade e é uma propriedade abreviada para as seguintes propriedades:
A grid-area
propriedade também pode ser usada para atribuir um nome a um item de grade. Os itens de grade nomeados podem ser referenciados pela
propriedade grid-template-areas do contêiner de grade. Veja exemplos abaixo.
Valor padrão: | carro / carro / carro |
---|---|
Herdado: | não |
Animavel: | sim. Leia sobre animáveis |
Versão: | Módulo de Layout de Grade CSS Nível 1 |
Sintaxe JavaScript: | object .style.gridArea="1 / 2 / span 2 / span 3" |
Suporte ao navegador
Os números na tabela especificam a primeira versão do navegador que oferece suporte total à propriedade.
Property | |||||
---|---|---|---|---|---|
grid-area | 57 | 16 | 52 | 10 | 44 |
Sintaxe CSS
grid-area: grid-row-start / grid-column-start / grid-row-end /
grid-column-end | itemname;
Valores de propriedade
Value | Description |
---|---|
grid-row-start | Specifies on which row to start displaying the item. |
grid-column-start | Specifies on which column to start displaying the item. |
grid-row-end | Specifies on which row-line to stop displaying the item, or how many rows to span. |
grid-column-end | Specifies on which column-line to stop displaying the item, or how many columns to span. |
itemname | Specifies a name for the grid item |
Mais exemplos
Exemplo
Item1 recebe o nome "myArea" e abrange todas as 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';
}
Exemplo
Deixe "myArea" abranger duas colunas em um layout de grade de cinco colunas (sinais de ponto representam itens sem nome):
.item1 {
grid-area: myArea;
}
.grid-container {
display:
grid;
grid-template-areas: 'myArea myArea . . .';
}
Exemplo
Faça com que "item1" abranja duas colunas e duas linhas:
.grid-container {
grid-template-areas: 'myArea myArea . . .' 'myArea
myArea . . .';
}
Exemplo
Nomeie todos os itens e crie um modelo de página da Web pronto para uso:
.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';
}
Páginas relacionadas
Tutorial CSS: Layout de grade CSS