Atributo grid do CSS

página anterior gap
Próxima página grid-area

Definição e uso

A propriedade grade é uma abreviação das seguintes propriedades:

Veja também:

Exemplo

Exemplo 1

Crie um layout de grade de três colunas, onde a primeira linha tem 150 pixels de altura:

.grade-container {
  display: grade;
  grade: 150px / auto auto auto;
}

Experimente você mesmo

Exemplo 2

Defina duas linhas, onde "item1" atravessa as duas primeiras colunas das duas primeiras linhas (usando layout de grade de cinco colunas):

.item1 {
  grade-area: myArea;
}
.grade-container {
  display: grade;
  grade:
    'myArea myArea ...'
    'myArea myArea ...';
}

Experimente você mesmo

Exemplo 3

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

.item1 { grade-area: header; }
.item2 { grade-area: menu; }
.item3 { grade-area: main; }
.item4 { grade-area: right; }
.item5 { grade-area: footer; }
.grade-container {
  display: grade;
  grade:
    header header header header header
    'menu principal principal principal direita direita'
    'menu rodapé rodapé rodapé rodapé';
}

Experimente você mesmo

Sintaxe CSS

grid: none|grid-template-rows / grid-template-columns|grid-template-areas|grid-template-rows / [grid-auto-flow] grid-auto-columns[grid-auto-flow] grid-auto-rows / grid-template-columns|initial|inherit;

Valor do atributo

Valor	Descrição
none	Valor padrão. Não define o tamanho das linhas ou colunas.
grid-template-rows / grid-template-columns	Determina o tamanho das colunas e das linhas.
grid-template-areas	Determina o layout da grade usando itens nomeados.
grid-template-rows / grid-auto-columns	Determina o tamanho das linhas (altura) e o tamanho automático das colunas.
grid-auto-rows / grid-template-columns	Determina o tamanho automático das linhas e define a propriedade grid-template-columns.
grid-template-rows / grid-auto-flow grid-auto-columns	Determina o tamanho das linhas (altura), como posicionar os itens auto-alinhados e o tamanho automático das colunas.
grid-auto-flow grid-auto-rows / grid-template-columns	Determina como posicionar os itens auto-alinhados, o tamanho automático das linhas e define a propriedade grid-template-columns.
initial	Defina essa propriedade como seu valor padrão. Veja: initial.
inherit	Herda essa propriedade do elemento pai. Veja: inherit.

Detalhes técnicos

Valor padrão:	none none none auto auto linha
Herança:	não
Produção de animação:	sim, veja propriedades individuais. Veja também:Propriedades relacionadas a animação.
Versão:	Módulo de Layout de Grade CSS Nível 1
Sintaxe JavaScript:	object.style.grid="250px / auto auto auto"