Como criar suas próprias grids - números mágicos

Estive fora esses dias,mas estou de volta para dar continuidade ao tema Grids. Hoje vamos aprender a criar nossas próprias grids.
Existem algun números mágicos que ajudam na criação de grids. Opiniões variam sobre esses números.
Uns usam colunas que variam de 24 a 30px, com um espaço de 10 pixels entre elas.
Se quiser criar sites ou blogs sobre grids você terá que encontrar sua própria fórmula
Eu particularmente uso sempre espaços em número ímpares. Vou explicar porque:

É mais fácil colocar uma linha divisória em um espaço impar, do que em um espaço de 10 px.

Uso uma fórmula matemática para criar as grids que preciso

Grid ((número de colunas - 1) X espaço em pixel) / números de colunas = Grid


950 ((16-1) X 10) / 16= Unidade

Vamos começar a criar uma grid em cima de um bloco do Adsense de 336 x 200.

Com uma coluna de 340px já poderemos dar nosso ponta pé inicial.
Divida a coluna com unidades de 165px e com espaçamento de 10px:

(340-10) / 2 = 165px

 

Lembre-se que a tela do computador em resolulão de 1024x768 geralmente oculpa entre 974px por 750px, então está grid no total teria 8 unidades de 110px totalizando uma grid de 950px.

 

Está grid para meus projetos não está boa pois tem poucas unidades. Se eu quiser criar um template com três colunas, por exemplo, já não daria.

Vamos então, fazer alguns ajustes na grid até conseguirmos um resultado satisfatório.

Subdivida cada coluna para chegarmos a um grid melhor. Vamos dividas em 16 unidades com 50px cada.

 

Agora sim já está melhor e posso dividi-la em  2 partes ou 3 partes:

 

 Ou então com uma coluna estreita do lado esquerdo para publicidade menores:

 

Realmente Grids são ótimas para começarmos projetos. Pense nisso:

É bem melhor começar um projeto com uma grid de fundo. Começar um projeto com uma tela toda em branco, muitas vezes, é desanimador.

Bom, espero que tenham entendido o uso das grids e como criá-las, caso não, faça seus comentários que responderei com prazer.

Abraços!

Subscreva o CSS-Desvendado completo!
Subscreva CSS - Desvendado por Email