A maquetação com CSS é muito facilitada com 960 Grid System, como veremos neste artigo, no qual não vamos mostrar todas as possibilidades do framework, mas sim uma pequena introdução a seu uso para maquetar conteúdos com muito pouco esforço. Já falamos deste sistema no artigo de Criarweb.com Apresentação de 960 Grid System

Simplesmente vamos fazer um esquema de containers que colocaremos com diferentes larguras e em colunas diferentes, para ver como se posicionam e como se define a largura dos elementos por meio deste framework CSS. Em cada container, por enquanto, colocaremos apenas um parágrafo com um conteúdo de texto.

Para realizar este exemplo e para diminuir sua complexidade, vamos utilizar a grade de 12 colunas (ao invés da de 16 colunas), que nos dá a suficiente versatilidade.

Container principal de 12 colunas

Tudo o que se deseje colocar na página deve ir em um container principal. Este container tem o nome de class CSS "container_xx", onde xx é o número de colunas que vamos utilizar. Para nosso caso de 12 colunas, teríamos o seguinte container:

<div class="container_12">
...
</div>

Dentro do container colocaremos os elementos da página já com a estrutura de grade.

Elementos da grade

Cada elemento a ser colocado no container tem uma classe como "grid_x", sendo x o número da classe que tem a largura desejada. No artigo anterior já vimos a lista de larguras de coluna permitidas por 960 Grid, para a variante de 12 colunas. A cada coluna colocamos um número para identificá-la. Esse é o número que temos que colocar dentro do nome da class CSS que utilizemos. Para abreviar a referência, coloco aqui também essa lista de grades com suas larguras:

1: 60px
2: 140px
3: 220px
4: 300px
5: 380px
6: 460px
7: 540px
8: 620px
9: 700px
10: 780px
11: 860px
12: 940px

Por exemplo, se queremos um elemento que utilize uma coluna com toda a largura disponível (seria a grid de largura 940px (número 12), utilizaríamos este código:

<div class="container_12">
   <div class="grid_12">
      <p>940 px</p>
   </div>
   <div class="clear"></div>
</div>

Como se pode ver, foi utilizado o nome de classe grid_12 e a largura do container 12 é de 940 pixels.

Dentro do container, depois de cada fila de elementos, há que colocar um div com class="clear", que elimina possíveis problemas de float que possamos ter no desenho com colunas.

Para colocar outro exemplo, agora pensemos em uma estrutura de duas colunas, onde ambas meçam 460 pixels de largura:

<div class="container_12">
   <div class="grid_6">
      <p>460 px</p>
   </div>
   <div class="grid_6">
      <p>460 px</p>
   </div>
   <div class="clear"></div>
</div>

Agora, para complicar um pouco mais, vamos ter várias filas de containers, onde a cada um colocaremos diferentes números de colunas e larguras:

<div class="container_12">
   <div class="grid_12">
      <p>940 px</p>
   </div>
   <div class="clear"></div>
   
   <div class="grid_2">
      <p>140 px</p>
   </div>
   <div class="grid_7">
      <p>540 px</p>
   </div>
   <div class="grid_3">
      <p>220 px</p>
   </div>
   <div class="clear"></div>
   
   <div class="grid_6">
      <p>460 px</p>
   </div>
   <div class="grid_6">
      <p>460 px</p>
   </div>
   <div class="clear"></div>

</div>

Podemos ver que são utilizadas constantemente as class de CSS com nomes grid_x, para especificar containers de distintas larguras. Depois de cada fila de elementos é colocado o mencionado DIV com class="clear". Neste caso, onde temos várias filas, é ainda mais importante utilizá-lo.

Este último exemplo pode ser visto em uma página à parte.

Como se pode ver nesta primeira demo de uso de 960 Grid System, maquetar com várias colunas e diferentes áreas de conteúdos é bem simples. Agora faltaria inserir conteúdos em cada um dos containers da grade. Não obstante, estas não são as únicas coisas que temos que saber para maquetar com 960 Grid System, de modo que em futuros artigos de Criarweb .com seguiremos vendo outros aspectos mais avançados do framework CSS.