O conceito de grid css é ótimo! E para realmente ser implementado, precisa vir desde o wireframe.

Os designers da equipe já precisam usar a base com as linhas guia, se você quiser conseguir aplicar um sistema de grid css nos teus projetos.

grid css 960gs

Bom para os designers

Pois eles perdem menos tempo definindo larguras. Medindo alinhamentos.

Basta seguir as guias, colocando 2 colunas, 3 colunas..

Bom para os DEVs

Pois conseguiremos num projeto grande, manter um padrão de estrutura entre diversos desenvolvedores.

GRID CSS com 960gs

Só não sou muito fãn, pois me incomoda esse tipo de coisa:

<div class="container_12">..
    <div class="grid_xx">..
        <div class="grid_x push_x">

Tenho a impressão que criaram o 960gs para que desenvolvedores “Não FrontEnds” pudessem utilizar. Ok, existe um mérito nisso.. mas eu sou frontend, e exatamente por isso, me incomoda posicionar colunas com paddings? e position..

Não faz sentido. A propriedade padding existe para definirmos espaçamentos internos a um elemento.

E position: relative, existe para deslocarmos em alguma direção apartir do ponto inicial em que o elemento se encontrava.

GRID CSS com 1140 css grid

Eu havia pensado da mesma forma que os criadores do projeto 1140 css grid, nomeando as classes pela quantidade de colunas que elas “pegam” de um total de 12. Por exemplo, se eu tiver 3 colunas iguais, cada coluna seria: .fourcol.

Porém, é esquisito pensar assim.

Minha sugestão para GRID CSS

Sei que existem diversos sistemas de grid css por ai, alguns até já preparados para serem responsivos. Porém ainda nenhum me convenceu.

Tenho implementado da seguinte forma:

.column-full { width: 940px; }
.column-half { width: 460px; }
.column-third { width: 300px; }
	.column-two-thirds { width: 620px; }
.column-quarter { width: 220px; }
	.column-three-quarters { width: 700px; }
.column-sixth { width: 140px; }

.space-left { margin-left: 20px; }
.space-right { margin-right: 20px; }

ou seja, nomeio os meus elementos de acordo com a fração que eles ocupam no documento.

Se eu tiver 2 colunas iguais, então tenho:

<div class="column-half fleft"></div>
<div class="column-half fright"></div>

E o respiro entre elas eu “ganho” de graça, ao jogar uma para a esquerda e outra para a direita.

Se forem 3 colunas:

<div class="column-third space-right fleft"></div>
<div class="column-third space-right fleft"></div>
<div class="column-third fright"></div>

E pronto! resolvido!

.fleft e .fright

Estas classes foram declaradas no meu css reset.

Porque “mais um” grid css?

Muito menos código do que os “concorrentes”, e mais liberdade para o desenvolvedor FrontEnd que utilizar.

Nomenclaturas mais intuitivas, sem gorduras estruturais.

Ainda não pensei em um “nome” para esse sistema de grid. Talvez algo como: column css grid system. 😉 sei lá..

O que achou ?

Você usa algum ? Por que ?

Acompanhe as atualizações desse projeto no github

Column.Gs