Item de grade CSS

1
2
3
4
5

Experimente pessoalmente

Elementos filhos (itens)

O contêiner de grade contém itens de grade.

Por padrão, o contêiner tem um item de grade em cada coluna de cada linha, mas você pode definir o estilo dos itens de grade para que eles se estendam por várias colunas e/ou linhas.

Propriedade grid-column:

grid-column A propriedade define onde o item será colocado na coluna.

Você pode definir a posição de início e de fim do item.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Notas:grid-column As propriedades são abreviações das propriedades grid-column-start e grid-column-end.

Para posicionar um item, você pode usar o número da linha (line numbers) ou o termo-chave "span" para definir quantas colunas o item será跨越.

Exemplo

faça com que "item1" comece na coluna 1 e termine antes da coluna 5:

.item1 {
  grid-column: 1 / 5;
}

Experimente pessoalmente

Exemplo

faça com que "item1" comece na coluna 1 e cubra 3 colunas:

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

Experimente pessoalmente

Exemplo

faça com que "item2" comece na coluna 2 e cubra 3 colunas:

.item2 {
  grid-column: 2 / span 3;
}

Experimente pessoalmente

Atributo grid-row:

grid-row O atributo define na qual linha o item será colocado.

Você pode definir a posição de início e de fim do item.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

Notas:grid-row O atributo é uma abreviação dos atributos grid-row-start e grid-row-end.

Para posicionar itens, você pode referenciar o número da linha ou usar a palavra-chave "span" para definir quantas linhas o item será transversal:

Exemplo

faça com que "item1" comece na linha 1 e termine na linha 4:

.item1 {
  grid-row: 1 / 4;
}

Experimente pessoalmente

Exemplo

faça com que "item1" comece na linha 1 e cubra 2 linhas:

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

Experimente pessoalmente

Atributo grid-area

grid-area O atributo pode ser usado como abreviação dos atributos grid-row-start, grid-column-start, grid-row-end e grid-column-end.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Exemplo

faça com que "item8" comece na linha 1 e na linha de coluna 2 e termine na linha 5 e na linha de coluna 6:

.item8 {
  grid-area: 1 / 2 / 5 / 6;
}

Experimente pessoalmente

Exemplo

faça com que "item8" comece na linha 2 e na linha de coluna e cubra 2 linhas e 3 colunas:

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

Experimente pessoalmente

Item de grade nomeado

grid-area O atributo também pode ser usado para atribuir nomes aos itens de grade.

Cabeçalho
Menu
Principal
Direita
Rodapé

pode ser usado no container da grade para atribuir nomes aos itens de grade. grid-template-areas o atributo para referenciar o item de grade nomeado.

Exemplo

O nome do item1 é "myArea" e ele atravessa todos os cinco colunas do layout de grade de cinco colunas:

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

Experimente pessoalmente

Cada linha é definida por aspas (' ')

As colunas de cada linha são definidas dentro de aspas e separadas por espaços.

Notas:Ponto significa item de grade sem nome.

Exemplo

Deixe "myArea" ocupar duas colunas em um layout de grade de cinco colunas (pontos são projetos sem nome):

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

Experimente pessoalmente

Para definir duas linhas, defina a segunda linha dentro de outro conjunto de aspas

Exemplo

Para que "item1" ocupe duas colunas e duas linhas:

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

Experimente pessoalmente

Exemplo

Nomeie todos os itens e crie um modelo de página da web sempre disponível:

.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

Ordem dos itens

A layout de grade permite que coloquemos os itens em qualquer posição que desejamos.

O primeiro item no código HTML não precisa ser exibido 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; }

Experimente pessoalmente

Você pode rearranjar a ordem de certos 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; }
}

Experimente pessoalmente