Artigos HTML e CSS Entendendo o GridSystem em CSS3

Neste artigo vamos ver um pouco sobre um módulo CSS, o CSS3 Grid Layout, que nos permite definir uma grade de elementos e local sobre a ele. CSS3 Grid Layout é um módulo criado pela Microsoft, e implementado usando o prefixo ms-no IE10.

Guia do artigo:

Se você não possui o IE10, existe uma maneira de ver e testar esses exemplos, para isso, se inscreva para criar uma conta no Browserstack e teste gratuitamente o browser que quiser.

O que é CSS3 Grid System?

O sistema de grids do CSS3 visa permitir que os projetos possam ser divididos em um conteúdo de grade pelos desenvolvedores. Ao invés de tentar fabricar uma grade de carros alegóricos, você pode declarar uma grade real em um elemento de recipiente e então usar isso para posicionar os elementos no interior. Mais importante ainda, a ordem de origem desses elementos não importa.

Declarando um GRID

Declaramos uma grade usando um novo valor para a propriedade display: grade. Como estamos usando a implementação IE10 aqui, precisamos que o valor de prefixo: display:-ms-grade;.

Uma vez que nós declaramos nosso grid, montamos as colunas e linhas usando a grid-colums e grid-rows.

Listagem 1: Declarando um grid


.wrapper {
    display: -ms-grid;
    -ms-grid-columns: 200px 20px auto 20px 200px;
    -ms-grid-rows: auto 1fr;
}

No exemplo acima, declaramos uma grade sobre o elemento wrapper. Usamos a propriedade de grid-columns para criar uma grade com uma coluna de 200 pixels de largura, um pixel-gutter de 20px, uma coluna de largura auto e flexível que vai esticar para preencher o espaço disponível, um outro pixel-gutter de 20 pixels de largura e uns 200px de barra lateral: um layout de largura flexível com duas barras laterais de largura fixa.

Usando a propriedade da grid-rows que eu criei duas linhas: a primeira é definida como auto para que ele irá esticar para preencher o que eu colocar nela; segunda linha é definida como 1FR, um novo valor usado em grades que significa uma unidade de fração. Neste caso, uma unidade de fracção do espaço disponível, de forma eficaz o espaço que está à esquerda.

Posicionando itens no grid

Agora eu tenho um grid simples onde eu posso incluir itens a ele. Se eu tiver um <div> com uma classe .main que eu queira colocar na segunda linha, e a coluna flexível setada como auto vai usar o css a seguir:

Listagem 2: CSS do grid


.content {
    -ms-grid-column: 3;
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
}

Criando um sistema de Grid

Assim que eu comecei a estudar CSS3 grid system, eu queria ver se eu poderia usá-lo para replicar um sistema de grade flexível como este: responsive 16-collums 960 grid system.

Comecei por definir uma grade no meu elemento wrapper, o uso de frações para fazer este grid fluido, como vemos na listagem 3.

Listagem 3: Definindo um grid


.wrapper {   
    width: 90%;
    margin: 0 auto 0 auto;
    display: -ms-grid;
    -ms-grid-columns: 1fr (4.25fr 1fr)[16];
    -ms-grid-rows: (auto 20px)[24];
}

Criamos uma classe CSS para cada opção de posicionamento: posição da coluna; posição linhas e extensão da coluna. Por exemplo:

Listagem 4: Adicionando múltiplas classes ao grid


.grid1 {-ms-grid-column: 2;} 
.grid2 {-ms-grid-column: 4;} /* 2nd column - gutter|column 1|gutter */
.grid3 {-ms-grid-column: 6;} /* 3rd column - gutter|column 1|gutter|column2|gutter */
.row1 {-ms-grid-row:1;}
.row2 {-ms-grid-row:3;}
.row3 {-ms-grid-row:5;}
.colspan1 {-ms-grid-column-span:1;}
.colspan2 {-ms-grid-column-span:3;}
.colspan3 {-ms-grid-column-span:5;}

Como podemos ver na figura 1, um exemplo de grid fluído.

960 Grid Flexível
Figura 1: 960 Grid Flexível.

Isso funciona, mas ainda não é o ideal. Isso mostra claramente como o módulo de layout de grade funciona e é um ponto de partida útil. Primeiro, temos de acrescentar classes para que nossa marcação possa amarrar um elemento para uma posição no grid. Isto pode não ser um problema se estivermos sempre mantendo uma grade de 16 colunas, porém, como vou mostrar-lhe que o mundo real do grid system aparece quando você começa a redefinir uma grade, usando grades diferentes com base em consultas de mídia. Se você deixar cair a um esquema de seis colunas para telas pequenas, os itens de posicionamento em coluna 16 não faz mais sentido.

Calculando a posição usando LESS

Como vimos, se você quiser usar uma grade com colunas principais e gutters, você tem que levar em conta o espaçamento entre as colunas, assim como as colunas reais. Isso significa que temos que calcular cada vez que formos colocar um item no grid. No exemplo acima temos em torno deste, criando uma classe CSS para cada posição, permitindo que possamos pensar em 16, em vez de 32 colunas. Mas usando um pré-processador CSS como o LESS, posso evitar o uso de todas as classes e ainda assim pensar em colunas principais.

Listagem 5: Exemplo simples com LESS


.position(@column,@row,@colspan,@rowspan) {
    -ms-grid-column: @column*2;
    -ms-grid-row: @row*2-1;
    -ms-grid-column-span: @colspan*2-1;
    -ms-grid-row-span: @rowspan*2-1;
}

Nesse exemplo temos 4 parâmetros: column; row; colspan; e rowspan. Então se quisermos incluir um item na coluna 4, linha 3 abrangendo duas colunas e uma linha, eu vou ter que escrever o css a seguir:

Listagem 6: CSS


 .box {
    .position(4,3,2,1);
}

E nosso grid irá retornar:

Listagem 7: Retorno do grid


.box {
    -ms-grid-column: 8;
    -ms-grid-row: 5;
    -ms-grid-column-span: 3;
    -ms-grid-row-span: 1;
}

Isso nos poupa de fazer algumas contas e operações matemáticas.

Podemos ver isso em ação criando um novo grid. Em vez de adicionar várias classes para cada elemento, eu posso adicionar uma classe, que usa um mix para criar a posição.

Grid Flexível com LESS
Figura 2: Grid Flexível com LESS.

A exibição é muito melhor. Não temos informações de posicionamentos direto em cada elemento na marcação, apenas o nome de uma classe.

Conclusão

Nesse artigo nós vimos como é possível criarmos ótimos layouts usando o sistema de grid, dessa forma conseguimos um desenvolvimento muito mais prático, tanto na criação do layout, quanto na transformação do layout em página html.

Espero que tenham gostado e até o próximo artigo.

Confira também

Posicionamento - Position

Posicionamento - Position

Curso
Introdução ao CSS na prática

CSS na prática

Curso
O que é CSS?

O que é CSS?

Curso