CSS Grid Layout
===============

**Nota:** CSS Grid será suportado por vários navegadores até meados de 2017. O suporte em navegadores antigos pode ser obtido habilitando-se uma flag que permite o uso da API. Nesse caso não se esqueça de consultar e fazer referência a cada propriedade e funcionalidade da especificação para certificar-se da sua compatibilidade, bem como para obter maiores informações.

**CSS Grid layout** é uma especificação do W3C projetada para proporcionar um método bi-dimensional para criação de layout CSS que oferece a possibilidade de "layoutar" itens da página com uso de linhas e colunas. CSS grid poderá ser usado para obter uma infinidade de diferentes layouts. O diferencial desse método de criação de layouts reside na possibilidade de se dividir uma página em grandes regiões e de se definir o relacionamento em termos de medidas, posicionamento e camadas entre os diferentes componentes da marcação HTML.

Tal como as tabelas, grid layout permite ao autor alinhar os componentes da página fazendo uso de linhas e colunas. Contudo ao contrário das tabelas, grid layout não se baseia em estruturação de conteúdos, possibilitando uma enorme variedade de layouts, o que não é possível de se obter com uso de tabelas. Por exemplo: elementos filhos de um grid container podem ser posicionados à vontade se sobrepondo ou mudando de layer, de modo idêntico como se faz com uso das funcionalidades do nosso já conhecido posicionamento CSS.

Exemplo básico
--------------

### HTML


```html
<div class="wrapper">
  <div class="box a">a</div>
  <div class="box b">b</div>
  <div class="box c">c</div>
  <div class="box d">d</div>
  <div class="box e">e</div>
  <div class="box f">f</div>
</div>
```

### CSS


```css
.wrapper {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 10px;
  background-color: #fff;
  color: #444;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
}
```

Referência
----------

### Propriedades CSS

* `grid-template-columns`
* `grid-template-rows`
* `grid-template-areas` (en-US)
* `grid-template` (en-US)
* `grid-auto-columns` (en-US)
* `grid-auto-rows` (en-US)
* `grid-auto-flow`
* `grid`
* `grid-row-start` (en-US)
* `grid-column-start` (en-US)
* `grid-row-end` (en-US)
* `grid-column-end` (en-US)
* `grid-row` (en-US)
* `grid-column` (en-US)
* `grid-area` (en-US)
* `grid-row-gap` (en-US)
* `grid-column-gap` (en-US)
* `grid-gap` (en-US)
### Funções CSS

* `repeat()` (en-US)
* `minmax()` (en-US)
### Glossário

* Grid Lines (en-US)
* Grid Tracks (en-US)
* Grid Cell (en-US)
* Grid Area
* Gutters (en-US)
* Grid row (en-US)
* Grid column (en-US)
Guias
-----

* Conceitos básicos de Grid Layout
* Relação do Grid Layout com outros métodos de layout
* Layout usando grid lines nomeadas (en-US)
* Grid template areas (en-US)
* Posicionamento Automático CSS Grid Layout (en-US)
* Alinhamento Box no CSS Grid Layout (en-US)
* CSS Grid, Valores Lógicos e Modos de Escrita (en-US)
* CSS Grid Layout e Acessibilidade (en-US)
* CSS Grid e Aprimoramento Progressivo (en-US)
* Realizando layouts comuns usando CSS Grid (en-US)
Especificações
--------------

| Specification |
| --- |
| CSS Grid Layout Module Level 2  |

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

* Glossário:
    + Grid lines (en-US)
    + Grid tracks (en-US)
    + Grid cell (en-US)
    + Grid areas
    + Gutters (en-US)
    + Grid row (en-US)
    + Grid column (en-US)