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
<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
.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
Funções CSS
Glossário
Guias
- Conceitos básicos de Grid Layout
- Relação do Grid Layout com outros métodos de layout
- Layout usando grid lines nomeadas
- Grid template areas
- Posicionamento Automático CSS Grid Layout
- Alinhamento Box no CSS Grid Layout
- CSS Grid, Valores Lógicos e Modos de Escrita
- CSS Grid Layout e Acessibilidade
- CSS Grid e Aprimoramento Progressivo
- Realizando layouts comuns usando CSS Grid
Especificações
| Specification |
|---|
| CSS Grid Layout Module Level 2 |
Veja também
- Glossário: