Propriedade Abreviada CSS grid — Guia Completo

A propriedade CSS grid é uma abreviação que permite definir um layout CSS Grid completo em uma única declaração. Ela define as seguintes seis sub-propriedades de uma vez no contêiner grid:

grid-template-rows — alturas das linhas explícitas
grid-template-columns — larguras das colunas explícitas
grid-template-areas — regiões nomeadas do layout
grid-auto-rows — altura das linhas criadas implicitamente
grid-auto-columns — largura das colunas criadas implicitamente
grid-auto-flow — direção em que os itens posicionados automaticamente são adicionados

A propriedade grid se aplica apenas a um contêiner grid — um elemento com display: grid ou display: inline-grid.

Importante: Qualquer sub-propriedade que você não mencionar em uma declaração grid é redefinida para seu valor inicial. Esta é a principal diferença em relação a definir sub-propriedades individualmente — grid sempre começa do zero.

Faixas explícitas vs. implícitas

Compreender essa distinção é a chave para interpretar qualquer valor grid:

Faixas explícitas são as linhas e colunas que você define manualmente. O / no valor separa as linhas (à esquerda) das colunas (à direita): grid: 100px 200px / 1fr 1fr significa duas linhas explícitas e duas colunas explícitas.
Faixas implícitas são linhas ou colunas extras que o navegador cria automaticamente quando há mais itens do que o grid explícito suporta. grid-auto-rows / grid-auto-columns definem seus tamanhos, e grid-auto-flow decide se o excesso vai para novas linhas (o padrão) ou novas colunas.

Você pode especificar ou as propriedades explícitas ou as implícitas em um único atalho grid — não ambas ao mesmo tempo.

A unidade `fr`

Layouts grid frequentemente usam fr (unidade de fração). 1fr significa "uma parte do espaço disponível". Três colunas definidas como 1fr 1fr 1fr recebem cada uma um terço da largura do contêiner. Você também pode combinar fr com tamanhos fixos: 200px 1fr dá à primeira coluna 200 px e à segunda coluna todo o espaço restante.

Sintaxe

/* Keyword */
grid: none;

/* Explicit rows / columns */
grid: <grid-template-rows> / <grid-template-columns>;

/* Template areas */
grid: <grid-template>;

/* Implicit rows, explicit columns */
grid: [ auto-flow && dense? ] <grid-auto-rows>? / <grid-template-columns>;

/* Explicit rows, implicit columns */
grid: <grid-template-rows> / [ auto-flow && dense? ] <grid-auto-columns>?;

/* Global values */
grid: inherit;
grid: initial;
grid: unset;

A notação && significa que ambas as palavras-chave devem aparecer; a ordem não importa. O ? indica que o termo é opcional.

Valor Inicial	`none`
Aplica-se a	Contêineres grid
Herdado	Não
Animável	Sim (layout grid é animável)
Versão CSS	CSS Grid Layout Module Level 1
Sintaxe DOM	`element.style.grid = "100px / 1fr 1fr"`

Formas de valor

Valor	O que faz
`none`	Remove qualquer template explícito; todas as sub-propriedades são redefinidas para o valor inicial.
`<template-rows> / <template-columns>`	Define faixas de linhas e colunas explícitas.
`<grid-template>`	Abreviação para `grid-template-rows`, `grid-template-columns` e `grid-template-areas`.
`<template-rows> / auto-flow [dense] [<auto-cols>]`	Linhas explícitas; colunas são geradas automaticamente. Adicione `dense` para preencher lacunas.
`auto-flow [dense] [<auto-rows>] / <template-cols>`	Linhas são geradas automaticamente; colunas são explícitas.
`initial`	Redefine a propriedade para seu valor padrão (`none`).
`inherit`	Herda o valor calculado do elemento pai.

Exemplos

Exemplo 1: Grid explícito básico

grid: 100px / auto auto auto cria uma linha explícita (100 px de altura) e três colunas de largura auto iguais. As nove caixas transbordam para linhas implícitas adicionais (dimensionadas automaticamente):

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid: 100px / auto auto auto;
        background-color: #ccc;
        padding: 10px;
      }
      .grid-box {
        background-color: #eee;
        border: 1px solid rgba(0, 0, 0, 0.8);
        padding: 30px;
        font-size: 30px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h2>Grid property example</h2>
    <div class="grid-container">
      <div class="grid-box">1</div>
      <div class="grid-box">2</div>
      <div class="grid-box">3</div>
      <div class="grid-box">4</div>
      <div class="grid-box">5</div>
      <div class="grid-box">6</div>
      <div class="grid-box">7</div>
      <div class="grid-box">8</div>
      <div class="grid-box">9</div>
    </div>
  </body>
</html>

Experimente Você Mesmo »

Exemplo 2: Auto-flow em colunas

grid: auto auto / auto-flow define duas linhas explícitas e instrui o navegador a gerar colunas automaticamente ao posicionar os itens. Cada item flui para uma nova coluna até que todos os itens sejam posicionados, preenchendo ambas as linhas coluna por coluna.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid: auto auto / auto-flow;
        gap: 5px;
        background-color: #1c87c9;
        padding: 10px;
      }
      .grid-container > div {
        background-color: rgba(255, 255, 255, 0.8);
        text-align: center;
        padding: 20px 0;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <h2>Grid property example</h2>
    <div class="grid-container">
      <div class="grid-box1">1</div>
      <div class="grid-box2">2</div>
      <div class="grid-box3">3</div>
      <div class="grid-box4">4</div>
    </div>
  </body>
</html>

Experimente Você Mesmo »

Exemplo 3: Posicionamento explícito de itens com `grid-area`

Cada caixa é posicionada com grid-area usando a sintaxe row-start / column-start / row-end / column-end sobre um template grid: 100px / auto auto auto:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-box1 {
        grid-area: 1 / 1 / 2 / 2;
      }
      .grid-box2 {
        grid-area: 1 / 2 / 2 / 3;
      }
      .grid-box3 {
        grid-area: 1 / 3 / 2 / 4;
      }
      .grid-box4 {
        grid-area: 2 / 1 / 3 / 2;
      }
      .grid-box5 {
        grid-area: 2 / 2 / 3 / 3;
      }
      .grid-box6 {
        grid-area: 2 / 3 / 3 / 4;
      }
      .grid-container {
        display: grid;
        grid: 100px / auto auto auto;
        gap: 10px;
        background-color: #1c87c9;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #eee;
        text-align: center;
        padding: 20px 0;
        font-size: 25px;
      }
    </style>
  </head>
  <body>
    <h2>Grid property example</h2>
    <div class="grid-container">
      <div class="grid-box1">1</div>
      <div class="grid-box2">2</div>
      <div class="grid-box3">3</div>
      <div class="grid-box4">4</div>
      <div class="grid-box5">5</div>
      <div class="grid-box6">6</div>
    </div>
  </body>
</html>

Experimente Você Mesmo »

Exemplo 4: Unidades `fr` para colunas flexíveis

Usar unidades fr é o padrão mais comum para grids responsivos. As três colunas abaixo recebem cada uma uma parte igual da largura disponível e encolhem ou crescem juntas:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid: auto / 1fr 1fr 1fr;
        gap: 10px;
        background-color: #1c87c9;
        padding: 10px;
      }
      .grid-container > div {
        background-color: rgba(255, 255, 255, 0.9);
        text-align: center;
        padding: 20px;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <h2>Three equal columns with fr units</h2>
    <div class="grid-container">
      <div>A</div>
      <div>B</div>
      <div>C</div>
      <div>D</div>
      <div>E</div>
      <div>F</div>
    </div>
  </body>
</html>

A regra grid: auto / 1fr 1fr 1fr é equivalente à forma mais verbosa:

grid-template-rows: auto;
grid-template-columns: 1fr 1fr 1fr;
/* all other grid sub-properties reset to initial */

Exemplo 5: Áreas de template nomeadas

O atalho grid suporta diretamente a sintaxe de grid-template-areas. Cada string entre aspas representa uma linha; cada palavra dentro é um nome de área. Um . (ponto) marca uma célula vazia.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .layout {
        display: grid;
        grid:
          "header header header" 60px
          "sidebar main   main"  1fr
          "footer footer footer" 40px
          / 160px 1fr 1fr;
        gap: 8px;
        height: 260px;
        background-color: #ccc;
        padding: 8px;
      }
      .header  { grid-area: header;  background: #1c87c9; color: #fff; display: flex; align-items: center; justify-content: center; }
      .sidebar { grid-area: sidebar; background: #8ecae6; display: flex; align-items: center; justify-content: center; }
      .main    { grid-area: main;    background: #eee;    display: flex; align-items: center; justify-content: center; }
      .footer  { grid-area: footer;  background: #023e8a; color: #fff; display: flex; align-items: center; justify-content: center; }
    </style>
  </head>
  <body>
    <div class="layout">
      <div class="header">Header</div>
      <div class="sidebar">Sidebar</div>
      <div class="main">Main content</div>
      <div class="footer">Footer</div>
    </div>
  </body>
</html>

O valor após cada string de linha entre aspas (60px, 1fr, 40px) é a altura da linha. O / ao final inicia a lista de larguras de colunas (160px 1fr 1fr).

Quando usar `grid` vs. `grid-template`

Objetivo	Use
Definir apenas tamanhos de linhas/colunas explícitas e áreas nomeadas	`grid-template`
Também controlar a direção de posicionamento automático ou tamanhos de faixas implícitas	`grid`
Definir apenas larguras de colunas	`grid-template-columns`
Definir apenas alturas de linhas	`grid-template-rows`

Optar pelo atalho mais específico torna o seu código mais fácil de ler e evita redefinir acidentalmente sub-propriedades não relacionadas.

Suporte a navegadores

O atalho grid é suportado em todos os navegadores modernos (Chrome 57+, Firefox 52+, Safari 10.1+, Edge 16+). Para ambientes mais antigos, pode ser necessário definir sub-propriedades individualmente. Verifique os dados de suporte atuais em Can I use: CSS Grid Layout.

Veja também

grid-template — abreviação apenas para sub-propriedades de template
grid-template-columns e grid-template-rows — dimensionamento de faixas explícitas
grid-template-areas — nomeação de regiões do layout
grid-auto-flow — controle de como os itens posicionados automaticamente preenchem o grid
grid-auto-rows e grid-auto-columns — dimensionamento de faixas implícitas
grid-gap — espaçamento entre linhas e colunas
grid-area — posicionar um item por área nomeada ou números de linha
display — o valor grid que transforma um elemento em um contêiner grid
align-items e justify-content — alinhamento dentro do grid

Prática

Quais das seguintes afirmações sobre a propriedade abreviada CSS grid estão corretas?

É uma abreviação que redefine as seis sub-propriedades grid de uma vez, incluindo as propriedades de template e de posicionamento automático.Sub-propriedades omitidas de uma declaração grid são redefinidas para seus valores iniciais.A unidade fr divide o espaço disponível em partes fracionárias iguais entre colunas ou linhas.A abreviação grid pode definir faixas de template explícitas e propriedades de auto-flow ao mesmo tempo em uma única declaração.grid: auto / 1fr 1fr cria duas colunas de largura igual com uma linha dimensionada automaticamente.

Faixas explícitas vs. implícitas

A unidade fr

Sintaxe

Formas de valor

Exemplos

Exemplo 1: Grid explícito básico

Exemplo 2: Auto-flow em colunas

Exemplo 3: Posicionamento explícito de itens com grid-area

Exemplo 4: Unidades fr para colunas flexíveis

Exemplo 5: Áreas de template nomeadas

Quando usar grid vs. grid-template

Suporte a navegadores

Veja também

Prática

A unidade `fr`

Exemplo 3: Posicionamento explícito de itens com `grid-area`

Exemplo 4: Unidades `fr` para colunas flexíveis

Quando usar `grid` vs. `grid-template`