Propriedade CSS grid-template

A propriedade CSS grid-template define as linhas, colunas e áreas nomeadas de um CSS grid em uma única declaração. É um atalho para três propriedades longas:

grid-template-rows — a altura de cada faixa de linha.
grid-template-columns — a largura de cada faixa de coluna.
grid-template-areas — regiões nomeadas nas quais você pode posicionar itens com grid-area.

Esta página explica a sintaxe, como a barra separa linhas de colunas, como funciona a forma de áreas nomeadas, quando usar grid-template em vez do atalho mais amplo grid, e apresenta exemplos executáveis que você pode editar ao vivo.

Como o atalho funciona

grid-template aplica-se somente a um grid container — um elemento com display: grid (ou inline-grid). A propriedade tem duas formas principais.

Forma de linhas / colunas

Coloque os tamanhos das linhas primeiro, depois uma barra (/), e em seguida os tamanhos das colunas:

.container {
  display: grid;
  grid-template: 100px 200px / 1fr 1fr 1fr; /* two rows / three columns */
}

O / é obrigatório quando você especifica linhas e colunas — ele indica ao navegador onde começa a lista de colunas. Os tamanhos podem usar qualquer unidade de dimensionamento de faixa:

Unidade	Significado
`px`, `%`, `em`	Tamanhos fixos ou relativos
`fr`	Uma fração do espaço livre restante
`auto`	Dimensionado pelo conteúdo, depois distribui o espaço restante
`min-content`	Menor tamanho que evita transbordamento
`max-content`	Maior tamanho sem quebra de linha
`minmax(min, max)`	Um intervalo — ex.: `minmax(100px, 1fr)`
`repeat(n, size)`	Repete uma faixa `n` vezes — ex.: `repeat(3, 1fr)`

A unidade fr é exclusiva do layout de grid. 1fr 2fr significa "uma parte e duas partes do espaço livre" — portanto, a segunda faixa é duas vezes mais larga que a primeira.

Forma de áreas nomeadas

Cada string entre aspas representa uma linha. As palavras dentro da string nomeiam as células daquela linha. Células que compartilham o mesmo nome entre linhas se fundem em uma área retangular. Um ponto (.) deixa uma célula sem nome:

.container {
  display: grid;
  grid-template:
    "header header" 60px
    "nav    main"   1fr
    / 120px 1fr;
}

O tamanho da linha (ex.: 60px, 1fr) é escrito após a string entre aspas, antes da próxima string. Os tamanhos opcionais de colunas vêm após o / final.

Em seguida, você posiciona os itens nas áreas nomeadas com grid-area:

header { grid-area: header; }
nav    { grid-area: nav; }
main   { grid-area: main; }

Esta é a forma mais legível de descrever um layout de página clássico em CSS.

Informação

grid-template não define o espaçamento entre faixas. Use gap (ou o atalho longo column-gap) para espaçamento entre faixas. Os espaçamentos são separados do dimensionamento das faixas.

grid-template vs. grid

O atalho mais amplo grid também redefine as propriedades do grid implícito — grid-auto-rows, grid-auto-columns e grid-auto-flow — para seus valores iniciais. grid-template deixa essas propriedades intocadas.

Quando usar cada um:

Use grid-template quando quiser apenas definir as faixas explícitas e as áreas sem afetar o comportamento de posicionamento automático.
Use grid quando quiser redefinir todas as propriedades de grid de uma vez só.

Referência da propriedade

Recurso	Valor
Valor inicial	`none`
Aplica-se a	Grid containers
Herdada	Não
Animável	Sim — os tamanhos de faixa são animáveis
Especificação	CSS Grid Layout Module Level 1

Sintaxe

grid-template: none
             | <grid-template-rows> / <grid-template-columns>
             | [ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?
             | initial | inherit | unset;

Valores

Valor	Descrição
`none`	Redefine as três propriedades longas (`grid-template-rows`, `grid-template-columns`, `grid-template-areas`) para seus valores iniciais. Os itens são posicionados pelo algoritmo de posicionamento automático.
`<rows> / <columns>`	Define faixas explícitas de linhas e colunas. Qualquer unidade de dimensionamento é válida: `px`, `%`, `fr`, `auto`, `minmax()`, `repeat()`, etc.
`"area-names" <size>`	Define áreas nomeadas linha por linha. Cada string entre aspas é uma linha; o tamanho opcional após ela é a altura daquela linha.
`initial`	Redefine a propriedade para `none`.
`inherit`	Herda o valor calculado do elemento pai.
`unset`	Comporta-se como `inherit` se a propriedade for herdável, caso contrário como `initial`.

Exemplos

Definindo linhas e colunas

Este grid tem uma linha explícita de 170px e três colunas dimensionadas com auto. Itens além da primeira linha fluem para linhas criadas implicitamente.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template: 170px / auto auto auto;
        grid-gap: 10px;
        background-color: #ccc;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #eee;
        text-align: center;
        padding: 30px 0;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <h2>Grid-template property example</h2>
    <div class="grid-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
  </body>
</html>

Experimente Você Mesmo »

Resultado:

Usando áreas nomeadas

Aqui, o primeiro item recebe o nome item1 via grid-area. As duas strings entre aspas posicionam item1 em um bloco 2×2 no canto superior esquerdo. Os pontos (.) marcam células vazias nas quais os itens restantes fluem.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box {
        grid-area: item1;
      }
      .grid-container {
        display: grid;
        grid-template: 'item1 item1 . .' 'item1 item1 . .';
        grid-gap: 10px;
        background-color: #ccc;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #eee;
        text-align: center;
        padding: 30px 0;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <h2>Grid-template property example</h2>
    <div class="grid-container">
      <div class="box">1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
  </body>
</html>

Experimente Você Mesmo »

Layout de página com áreas nomeadas

Um layout clássico de três seções — cabeçalho, barra lateral e conteúdo — definido em uma única declaração grid-template:

<!DOCTYPE html>
<html>
  <head>
    <title>Named area layout</title>
    <style>
      .page {
        display: grid;
        grid-template:
          "header  header"  60px
          "sidebar content" 1fr
          "footer  footer"  40px
          / 160px 1fr;
        gap: 8px;
        height: 300px;
      }
      .page > * {
        background: #dde;
        padding: 8px;
        font-family: sans-serif;
      }
      .hdr  { grid-area: header; }
      .side { grid-area: sidebar; }
      .main { grid-area: content; }
      .ftr  { grid-area: footer; }
    </style>
  </head>
  <body>
    <div class="page">
      <div class="hdr">Header</div>
      <div class="side">Sidebar</div>
      <div class="main">Content</div>
      <div class="ftr">Footer</div>
    </div>
  </body>
</html>

O layout é totalmente definido em uma única propriedade: três linhas (60 px / flexível / 40 px) e duas colunas (barra lateral de 160 px / conteúdo flexível). Não é necessário usar spans de grid-column ou grid-row — os nomes fazem o trabalho.

Erros comuns

As áreas devem formar um retângulo. Não é possível criar uma área nomeada em formato de L ou T. Se você tentar, a declaração é inválida e o navegador a ignora.

O número de linhas deve coincidir. O número de células em cada string entre aspas deve ser igual. "a b" seguido de "a b c" é inválido.

grid-template redefine as três propriedades longas. Definir grid-template: 1fr / 1fr implicitamente define grid-template-areas: none — quaisquer áreas nomeadas definidas anteriormente são apagadas.

As faixas implícitas não são afetadas. grid-template controla apenas o grid explícito. Itens extras que ultrapassam as linhas e colunas definidas são posicionados em faixas implícitas, dimensionadas por grid-auto-rows e grid-auto-columns.

Suporte dos navegadores

grid-template faz parte do CSS Grid Layout Module Level 1 e é suportado em todos os navegadores modernos (Chrome 57+, Edge 16+, Firefox 52+, Safari 10.1+, Opera 44+). Não tem efeito em elementos que não são grid containers — sempre combine com display: grid.

Prática

O que a propriedade CSS grid-template faz?

Permite definir linhas, colunas e áreas nomeadas para um grid container em uma única declaração.É usada para alinhar o conteúdo dentro de um item de grid.É um atalho para grid-template-rows, grid-template-columns e grid-template-areas.Altera a cor de fundo de um grid container.