Entendendo a Grade

960 Grid System utiliza classes CSS através de heranças. Grid 960 provê duas grades: 12 e 16 colunas. A div container externa terá sempre 960 pixels de largura. Usando 960 Grid System são possíveis várias combinações de utilização de colunas. Utilizaremos a grade de 12 colunas para criar este projeto, mas não utilizaremos todas as 12 colunas. Toda célula de grade terá margin: 0 10px.Isto criará uma distância entre células de 20 pixels. Quando estiver dispondo elementos em linha, a largura total dos elementos se limitarão aos 960 pixels. Dê uma olhada nesta página exemplo. Você verá as combinações possíveis. Cada célula da grade tem uma classe que especifica qual largura será obtida. Aqui estão os valores correspondentes:

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

Cada largura corresponderá a um nome de classe definido da seguinte forma: grid_X onde X é um número da lista acima.Se você deseja um bloco de 940 pixels use a classe grid_12. Como a Grid 960 “sabe” qual a largura que cada linha deve ter ? Cada grid_x is tem um seletor container_Y .grid_X onde Y é de 12 ou 16 colunas. Vamos ver como criar uma grade de duas linhas num container de 12 colunas. Faremos a primeira linha com 940 pixels, e a segunda conterá duas colunas do mesmo tamanho. Para ver o código funcionando, é preciso copiar o HTML que segue adiante, inserir antes dele o DOCTYPE (faça isso no Dreamweaver, que abre um HTML novo já com o DOCTYPE) e ‘linká-lo’ ao estilo 960.css, que você encontra em http://960.gs.

  1. <div class=”container_12″>
  2.     <div class=”grid_12″><p>940px</p></div>
  3.     <div class=”clear”></div>
  4.     <div class=”grid_6″><p>460px</p></div>
  5.     <div class=”grid_6″><p>460px</p></div>
  6.     <div class=”clear”></div>
  7. </div>

Ao criar uma linha dentro da grade, esteja certo de que os valores grid_X correspondam ao total. Isso assegura a largura de forma correta. Duas div’s grid_6 terão o total 12, correspondendo a 12 células. Você não está limitado a esses valores. Você pode usar também 6, 4, e 2. Assim você tem uma grade pronta para receber conteúdo. Agora que você sabe como a Grid 960 funciona, vejamos como criar o layout.

About these ads