O que são grids CSS:
Grids CSS nada mais são que a "simulação" de uma estrutura tabular por meio de divs
. Se você começou a mexer com internet na época de IE6 e afins, deve lembrar que tabelas eram muito utilizadas para estruturar layouts HTML. Isso se devia ao fato de ser mais fácil de trabalhar com layout em formato de grid na web, e a tabela tinha um comportamento parecido com uma grid (uma tabela de 10 linhas x 10 colunas simularia uma grid de 10x10).
O problema é que tabelas tem certas peculiaridades, como por exemplo o fato de não se darem muito bem com layouts responsivos (afinal, tabelas foram pensadas para se comportarem como estruturas "engessadas" desde o início), e semanticamente falando, não são recomendadas para o uso na construção do layout de uma página (como você acha que um leitor para cegos vai entender uma página que é toda feito dentro uma infinidade de tabelas, que estão sendo erroneamente utilizadas para montar layouts ao invés de mostrar dados tabulares?).
Junte estes fatores com o fato de layouts estarem se tornando a cada dia mais complexos e com um numero cada vez maior de dispositivos de todos os tamanhos com acesso a internet e fica evidente que layouts usando tabelas nunca foi e nunca seria a melhor solução disponível.
Foi então que os desenvolvedores perceberam que se eles conseguissem reproduzir a funcionalidade de grid de uma tabela, com a mobilidade e responsividade dos elementos de bloco (divs
) isso facilitaria muito o processo de montagem de layouts, sendo a solução perfeita para finalmente subistituir as tabelas. Assim nascia o conceito de grids CSS.
Algumas das vantagens de se utilizar grids CSS são:
- Semanticamente correto (elementos de layout sendo usados para layout);
- Permite fácil estilização e maleabilidade;
- Permite a reestruturação total dos blocos da grid de acordo com o tamanho do dispositivo (experimente redimensionar seu navegador
acessando o site do Bootstrap);
Como usar grids CSS:
Como você mesmo disse na sua pergunta, praticamente todos os frameworks CSS vem com um sistema de grids com eles, e apesar de o nome das classes mudar, geralmente a estrutura é sempre a mesma (e inclusive vai te lembrar a estrutura de uma tabela):
[bloco-pai]
|
|----[linha]
| |
| |----[coluna]
Esta estrutura acima pode ser descrita em HTML como:
<div class="bloco-pai">
<div class="linha">
<div class="coluna"></div>
</div>
</div>
Cada bloco-pai
pode ter n
linhas, e cada linha
pode ter n
colunas (teóricamente, embora a maioria dos frameworks aceite um total de no máximo 12 ou 24 colunas)
Como você pode perceber, a estrutura de uma grid CSS é bem parecida com a estrutura de uma table
, vou mostrar um exemplo:
<table> <!-- equivalente ao bloco-pai -->
<tr> <!-- equivalente a linha -->
<td></td> <!-- equivalente a coluna -->
</tr>
</table>
Depois que você entende que a estrutura de uma grid CSS nada mais é que o equivalente a estrutura de uma table
, fica muito mais fácil de entender o que você está fazendo no código.
Pois bem, e se eu quiser trabalhar com grids CSS, mas usando colunas com tamanhos distintos?
É aí que entram aquelas classes com nomes estranhos do Bootstrap:
Estas classes, quando adicionadas em uma coluna definem um tamanho específico para ela, o que seria o equivalente ao colspan
nas tabelas.
Então vamos a mais um exemplo, desta vez usando o Bootstrap:
<div class="container">
<div class="row">
<div class="col-md-8"></div> <!-- Esta coluna terá um tamanho de 8/12 -->
<div class="col-md-4"></div> <!-- Esta coluna terá um tamanho de 4/12 -->
</div>
</div>
Como você pode ver, a estrutura básica acima vai gerar uma "grid" com uma linha e duas colunas, uma de tamanho 8/12 (66.66%) e outra de tamanho 4/12 (33.33%).
Lembrando que os tamanhos das colunas geralmente nunca são definidos em px
(pixels), mas sim em %
(porcentagem), de forma que eles sempre assumem uma porcentagem do tamanho do elemento pai acima deles.
Isto significa que se você criasse um elemento pai com uma largura de 1000px
e adicionasse duas colunas com tamanho 6/12
(ou seja, 50%) dentro dele, essas colunas assumiriam 500px
de largura cada uma. Caso o tamanho do elemento pai fosse modificado para 500px
, ambas as colunas agora teriam 250px
, e assim por diante.
Bom, grids CSS possuem muito mais vantagens e detalhes extras que se fossem ser escritos aqui iam acabar gerando uma resposta maior do que esta já está, então deixo o resto como lição de casa para você ler lá na documentação do Bootstrap.
Bonus:
Para quem não sabe, existe um padrão de grids CSS sendo especificado pela W3C, e -pasmen-, o IE10+ já implementou a funcionalidade. Vale a pena dar uma olhada.