Treinamento Técnicas de Invasão

Bootstrap – O que são grids CSS

mm

Ramos de Souza Janones

Janones, é um empreendedor brasileiro apaixonado por empreendedorismo e tecnologia. Ao longo dos anos trabalhando com o desenvolvimento de softwares desktop desde a linguagem Clipper, passando pelo Delphi e atualmente com Java.

Optou pela formação de Publicidade e Marketing por sua segunda empresa de tecnologia ter participado do "boom" da internet nos anos 90 e na procura de melhorar seus conhecimentos em negócios.

Em razão da principal formação e profundos conhecimentos em programação e banco de dados, é capaz de realizar o desenvolvimento de aplicativos web, desktop e mobile com maior criatividade e inovação que profissionais de desenvolvimento com uma formação única e mais especifica, dedicada somente ao desenvolvimento de softwares.

Com toda sua experiência com empresas de software, sua formação e paixão por negócios escreveu o livro "Marketing para Empresas e Profissionais de Software", publicado pela editora carioca Ciência Moderna em 2012. Além de outros livros sobre programação.
mm

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 10×10).

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):

 

Esta estrutura acima pode ser descrita em HTML como:

 

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:

 

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: inserir a descrição da imagem aqui

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:

 

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 500pxde 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.

Compartilhe.

PinIt
Top
%d blogueiros gostam disto: