grid
====

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.

* Learn more
* See full compatibility
* Report feedback
A propriedade **`grid`** do CSS é uma abreviação das propriedades que definem todas as propriedades da grade explícita (`grid-template-rows`, `grid-template-columns`, e `grid-template-areas` (en-US)), e todas as propriedades implícitas da grade (`grid-auto-rows` (en-US), `grid-auto-columns` (en-US), e `grid-auto-flow`), em uma única declaração.

Experimente
-----------

**Nota:** Você pode especificar apenas as propriedades explícitas *ou* implícitas da grade em uma única declaração `grid`. As subpropriedades que você não especifica são definidas como seu valor inicial, como é normal para abreviações. Além disso, as propriedades da medianiz NÃO são redefinidas por essa abreviação.

Sintaxe
-------


```css
/\* <'grid-template'> values \*/
grid: none;
grid: "a" 100px "b" 1fr;
grid: [linename1] "a" 100px [linename2];
grid: "a" 200px "b" min-content;
grid: "a" minmax(100px, max-content) "b" 20%;
grid: 100px / 200px;
grid: minmax(400px, min-content) / repeat(auto-fill, 50px);

/\* <'grid-template-rows'> /
 [ auto-flow && dense? ] <'grid-auto-columns'>? values \*/
grid: 200px / auto-flow;
grid: 30% / auto-flow dense;
grid: repeat(3, [line1 line2 line3] 200px) / auto-flow 300px;
grid: [line1] minmax(20em, max-content) / auto-flow dense 40%;

/\* [ auto-flow && dense? ] <'grid-auto-rows'>? /
 <'grid-template-columns'> values \*/
grid: auto-flow / 200px;
grid: auto-flow dense / 30%;
grid: auto-flow 300px / repeat(3, [line1 line2 line3] 200px);
grid: auto-flow dense 40% / [line1] minmax(20em, max-content);

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

### Valores

`<'grid-template'>`

Define o `grid-template` (en-US) incluindo `grid-template-columns`, `grid-template-rows` e `grid-template-areas` (en-US).

`<'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>?`

Configura um fluxo automático definindo as faixas de linha explicitamente por meio da propriedade `grid-template-rows` (e a propriedade `grid-template-columns` para `none`) e especificando como repetir automaticamente as faixas da coluna via `grid-auto-columns` (en-US) (e setando `grid-auto-rows` (en-US) para `auto`). `grid-auto-flow` também é definido para a `column`, de acordo com `dense`, se especificado.

Todas as outras subpropriedades `grid` são redefinidas para seus valores iniciais.

`[ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>`

Configura um fluxo automático definindo as faixas da coluna explicitamente por meio da propriedade `grid-template-columns` (e a propriedade `grid-template-rows` para `none`) e especificando como repetir automaticamente as faixas de linha via `grid-auto-rows` (en-US) (e setando `grid-auto-columns` (en-US) para `auto`). `grid-auto-flow` também é definido para `row` de acordo com `dense`, se especificado.

Todas as outras subpropriedades `grid` são redefinidas para seus valores iniciais.

### Sintaxe formal
```

grid =   
  <'grid-template'>                                   | (en-US)  
  <'grid-template-rows'> / [ (en-US) auto-flow && (en-US) dense? (en-US) ] (en-US) <'grid-auto-columns'>? (en-US)  | (en-US)  
  [ (en-US) auto-flow && (en-US) dense? (en-US) ] (en-US) <'grid-auto-rows'>? (en-US) / <'grid-template-columns'>    
  
```

Exemplo
-------

### Conteúdo HTML


```html
<div id="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
```

### Conteúdo CSS


```css
#container {
  display: grid;
  grid: repeat(2, 60px) / auto-flow 80px;
}

#container > div {
  background-color: #8ca0ff;
  width: 50px;
  height: 50px;
}
```

### Resultado

Especificações
--------------

| Specification |
| --- |
| CSS Grid Layout Module Level 2 # grid-shorthand |

|  |  |
| --- | --- |
| Initial value | as each of the properties of the shorthand:* `grid-template-rows`: `none`
* `grid-template-columns`: `none`
* `grid-template-areas` (en-US): `none`
* `grid-auto-rows` (en-US): `auto`
* `grid-auto-columns` (en-US): `auto`
* `grid-auto-flow`: `row`
* `grid-column-gap` (en-US): `0`
* `grid-row-gap` (en-US): `0`
* `column-gap` (en-US): `normal`
* `row-gap` (en-US): `normal`
 |
| Aplica-se a | grid containers |
| Inherited | não |
| Percentages | as each of the properties of the shorthand:* `grid-template-rows`: refer to corresponding dimension of the content area
* `grid-template-columns`: refer to corresponding dimension of the content area
* `grid-auto-rows` (en-US): refer to corresponding dimension of the content area
* `grid-auto-columns` (en-US): refer to corresponding dimension of the content area
 |
| Computed value | as each of the properties of the shorthand:* `grid-template-rows`: as specified, but with relative lengths converted into absolute lengths
* `grid-template-columns`: as specified, but with relative lengths converted into absolute lengths
* `grid-template-areas` (en-US): as specified
* `grid-auto-rows` (en-US): the percentage as specified or the absolute length
* `grid-auto-columns` (en-US): the percentage as specified or the absolute length
* `grid-auto-flow`: as specified
* `grid-column-gap` (en-US): the percentage as specified or the absolute length
* `grid-row-gap` (en-US): the percentage as specified or the absolute length
* `column-gap` (en-US): as specified, with <length>s made absolute, and normal computing to zero except on multi-column elements
* `row-gap` (en-US): as specified, with <length>s made absolute, and normal computing to zero except on multi-column elements
 |
| Animation type | as each of the properties of the shorthand:* `grid-template-rows`: simple list of length, percentage, or calc, provided the only differences are in the values of the length, percentage, or calc components in the list
* `grid-template-columns`: simple list of length, percentage, or calc, provided the only differences are in the values of the length, percentage, or calc components in the list
* `grid-template-areas` (en-US): discrete
* `grid-auto-rows` (en-US): by computed value type
* `grid-auto-columns` (en-US): by computed value type
* `grid-auto-flow`: discrete
* `grid-column-gap` (en-US): a length
* `grid-row-gap` (en-US): a length
* `column-gap` (en-US): a length, percentage or calc();
* `row-gap` (en-US): a length, percentage or calc();
 |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* Propriedades CSS relacionadas: `grid-template` (en-US), `grid-template-rows`, `grid-template-columns`, `grid-template-areas` (en-US), `grid-auto-columns` (en-US), `grid-auto-rows` (en-US), `grid-auto-flow`
* Guia de Layout de Grade: *Line-based placement with CSS Grid (en-US)*
* Guia de Layout de Grade: *Grid template areas - Grid definition shorthands (en-US)*

1. **CSS**
2. **CSS Reference**
3. CSS Grid Layout
4. **Guias**
    1. Basics concepts of grid layout
    2. Relationship to other layout methods
    3. Line-based placement (en-US)
    4. Grid template areas (en-US)
    5. Layout using named grid lines (en-US)
    6. Auto-placement in grid layout (en-US)
    7. Box alignment in grid layout (en-US)
    8. Grids, logical values and writing modes (en-US)
    9. CSS Grid Layout and Accessibility (en-US)
    10. CSS Grid Layout and Progressive Enhancement (en-US)
    11. Realizing common layouts using grids (en-US)
5. **Propriedades**
    1. grid
    2. grid-area (en-US)
    3. grid-auto-columns (en-US)
    4. grid-auto-flow
    5. grid-auto-rows (en-US)
    6. grid-column (en-US)
    7. grid-column-end (en-US)
    8. grid-column-gap (en-US)
    9. grid-column-start (en-US)
    10. grid-gap (en-US)
    11. grid-row (en-US)
    12. grid-row-end (en-US)
    13. grid-row-gap (en-US)
    14. grid-row-start (en-US)
    15. grid-template (en-US)
    16. grid-template-areas (en-US)
    17. grid-template-columns
    18. grid-template-rows
6. **Glossário**
    1. Grid lines (en-US)
    2. Grid tracks (en-US)
    3. Grid cell (en-US)
    4. Grid areas
    5. Gutters (en-US)
    6. Grid row (en-US)
    7. Grid column (en-US)