Início > CSS, Ferramentas > CSS – Os benefícios do uso de grids

CSS – Os benefícios do uso de grids

Quanto custa um minuto do seu tempo? Uma hora? Uma semana?

O bem mais precioso que temos é nosso tempo e temos que saber o que fazer com o pouco que nos resta, ou “fabricar” tempo.

Pois muitos de nós já perdemos muitas horas elaborando um layout de colunas em CSS, com floats que funcionam em todos os browsers, margens adequadas e mais um monte de coisas e algumas “gambiarras” para que o layout funcione perfeitamente em todos os browsers, pois cada browser interpreta como quer páginas da web.

Ganhe rapidez e organização usando grids em CSS. Chega de perder tempo se temos sistemas fantásticos de grids que deixam tudo praticamente pronto e adaptado.

Destaco um deles. o 960 Grid System.

Note como funciona na figura abaixo:

O espaço em branco é o espaçamento, e você vê as divs configuradas.

O 960 Grid System cria um documento com as definições, chamado 960.css.

Ao definir uma grid, você define na class o tamanho da grid e onde ela ficará posicionada.

Ex: <div class=”grid_1″>

Neste caso a div irá ocupar 1 dos quadrinhos da figura. Mas se você quiser posicionar a grid de maneira diferente, pode usar as definições prefix e sufix para definir quantos quadros antes e quantos quadros depois da div que estamos posicionando. Vamos supor que queremos posicionar nossa div da terceira coluna em diante ocupando 1 coluna do nosso grid com 24 colunas. Então nosso código ficaria assim:

Ex: <div class=”grid_1 prefix_2 sufix_21″>

Ou seja, a grid ocupará 1 coluna, com 2 colunas antes e 21 colunas depois, fechando as 24 colunas do grid.

O 960 Grid System tem também opções de adaptive layout, que se adapta de monitores com mais de 2000 pixels de largura até IPads utilizando um CSS para cada resolução e também tem a opção de layout fluído, utilizando o mesmo sistema de grid escolhido.

Possui um Custom CSS Generator onde podemos definir a largura das margens, quantas colunas queremos e qual a largura de cada colna ou a largura total do layout.

Poupe tempo, energia e dores de cabeça usando o 960 Grid System que seu layout ficará organizado e extremamente profissional.

Divirta-se e inspire-se.

Anúncios
Categorias:CSS, Ferramentas Tags:
  1. Nenhum comentário ainda.
  1. No trackbacks yet.

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: