Item de grade CSS
1
2
3
4
5
Elementos filhos (itens)
Um contêiner de grade contém itens de grade .
Por padrão, um contêiner tem um item de grade para cada coluna, em cada linha, mas você pode estilizar os itens de grade para que eles abranjam várias colunas e/ou linhas.
A propriedade da coluna da grade:
A grid-columnpropriedade define em qual(is) coluna(s) colocar um item.
Você define onde o item começará e onde o item terminará.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Nota: A grid-columnpropriedade é uma propriedade abreviada para o grid-column-starte as grid-column-endpropriedades.
Para colocar um item, você pode consultar os números de linha ou usar a palavra-chave "span" para definir quantas colunas o item abrangerá.
Exemplo
Faça "item1" começar na coluna 1 e terminar antes da coluna 5:
.item1 {
grid-column: 1 / 5;
}
Exemplo
Faça com que "item1" comece na coluna 1 e abranja 3 colunas:
.item1 {
grid-column: 1 / span 3;
}
Exemplo
Faça com que "item2" comece na coluna 2 e abranja 3 colunas:
.item2 {
grid-column: 2 / span 3;
}
A propriedade grid-row:
A grid-rowpropriedade define em qual linha colocar um item.
Você define onde o item começará e onde o item terminará.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Nota: A grid-rowpropriedade é uma propriedade abreviada para o grid-row-starte as grid-row-endpropriedades.
Para colocar um item, você pode consultar os números de linha ou usar a palavra-chave "span" para definir quantas linhas o item abrangerá:
Exemplo
Faça "item1" começar na linha 1 e terminar na linha 4:
.item1 {
grid-row: 1 / 4;
}
Exemplo
Faça "item1" começar na linha 1 e abranger 2 linhas:
.item1 {
grid-row: 1 / span 2;
}
A propriedade de área de grade
A grid-areapropriedade pode ser usada como uma propriedade abreviada para
grid-row-start, grid-column-starte grid-row-endas grid-column-endpropriedades.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Exemplo
Faça o "item8" começar na linha 1 da linha e na linha 2 da coluna e terminar na linha 5 da linha e na linha 6 da coluna:
.item8 {
grid-area: 1 / 2 / 5 / 6;
}
Exemplo
Faça o "item8" começar na linha 2 da linha e na linha 1 da coluna e abranger 2 linhas e 3 colunas:
.item8 {
grid-area: 2 / 1 / span 2 / span 3;
}
Nomeando itens de grade
A grid-areapropriedade também pode ser usada para atribuir nomes a itens de grade.
Cabeçalho
Cardápio
Principal
Direito
Rodapé
Itens de grade nomeados podem ser referenciados pela grid-template-areaspropriedade do contêiner de grade.
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 {
grid-template-areas: 'myArea myArea
myArea myArea myArea';
}
Cada linha é definida por apóstrofos (' ')
As colunas em cada linha são definidas dentro dos apóstrofos, separadas por um espaço.
Nota: Um sinal de ponto final representa um item de grade sem nome.
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 {
grid-template-areas: 'myArea myArea
. . .';
}
Para definir duas linhas, defina a coluna da segunda linha dentro de outro conjunto de apóstrofos:
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';
}
A ordem dos itens
O Grid Layout nos permite posicionar os itens onde quisermos.
O primeiro item no código HTML não precisa aparecer como o primeiro item na grade.
1
2
3
4
5
6
Exemplo
.item1 { grid-area: 1 / 3 / 2 / 4; }
.item2 { grid-area: 2 / 3 / 3 / 4; }
.item3 { grid-area: 1 / 1 / 2 / 2; }
.item4 { grid-area: 1 / 2 / 2 / 3; }
.item5 { grid-area: 2 / 1 / 3 / 2; }
.item6 { grid-area: 2 / 2 / 3 / 3; }
Você pode reorganizar a ordem para determinados tamanhos de tela usando consultas de mídia:
Exemplo
@media only screen and (max-width: 500px) {
.item1 { grid-area: 1 /
span 3 / 2 / 4; }
.item2 { grid-area: 3 / 3 / 4 / 4; }
.item3 { grid-area: 2 / 1 / 3 / 2; }
.item4 { grid-area: 2 / 2 /
span 2 / 3; }
.item5 { grid-area: 3 / 1 / 4 / 2; }
.item6
{ grid-area: 2 / 3 / 3 / 4; }
}