Atributo CSS grid-template

Definição e uso

A propriedade grid-template é uma abreviação das seguintes propriedades:

Veja também:

Tutorial CSS:Projeto de grade CSS

Manual de referência CSS:A propriedade grid-area

Manual de referência CSS:A propriedade grid-template-rows

Manual de referência CSS:A propriedade grid-template-columns

Manual de referência CSS:A propriedade grid-template-areas

Exemplo

Exemplo 1

Criar um layout de três colunas com uma altura de 150 pixels para a primeira coluna:

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

Experimente você mesmo

Exemplo 2

Define duas linhas, onde "item1" ocupa os dois primeiros colunas das duas primeiras linhas (em um layout de grade de cinco colunas):

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

Experimente você mesmo

Exemplo 3

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

Experimente você mesmo

Sintaxe CSS

grid-template: none|grid-template-rows / grid-template-columns|grid-template-areas|initial|inherit;
Valor do atributo
Valor Descrição
none Valor padrão. Não define o tamanho das colunas ou linhas.
grid-template-rows / grid-template-columns Define o tamanho das colunas e linhas.
grid-template-areas Define o layout de grade usando nomes de itens.
initial Defina essa propriedade para seu valor padrão. Consulte initial.
inherit Herda essa propriedade do elemento pai. Consulte inherit.

Detalhes técnicos

Valor padrão: none none none
Herança: Não
Produção de animação: Suporte. Consulte:Propriedades relacionadas a animação.
Versão: Módulo de Layout em Grade CSS Level 1
Sintaxe JavaScript: object.style.gridTemplate = "250px / auto auto"

Suporte do navegador

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

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