Bootstrap – O que são grids CSS?

Bootstrap – O que são grids CSS?

4 de dezembro de 2017 2 Por Ramos de Souza Janones
Powered by Rock Convert

Praticamente todos os frameworks de desenvolvimento Web e mobile o CSS vem com um sistema de grids com eles. Entenda o que são grids CSS no Bootstrap.

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:

Leia também:  
  • 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:

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]

 

LEIA TAMBÉM:  Entendendo Bootstrap

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>

 

Powered by Rock Convert
Como vender Software - Seja desktop, web ou MobilePowered by Rock Convert

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:

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

Frontend Do Zero Ao Profissional

LEIA TAMBÉM:  O que ão e como usar tags semânticas em HTML

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.

Artigos relacionado a Javascript

Artigos e dicas sobre Javascript e toda sua familia: Node.js, Angular, Ionic, React e muito mais.

– GitHub lança repositórios privados gratuitos para até três colaboradores

– Como fazer testes unitários no Node.js com NodeUnit

– Epoc.js: Projeto open source em JavaScript para Sensores de Controle Cerebral

– Migre para o Ionic Framework 4 mais fácil usando o TSLint Fixers

– Apollo lança a Plataforma GraphQL e extensão para VS Code

– As novidades do Angular 7

– Tecnologias que andam bombando no GitHub ultimamente

– Node.JS: Envie o gemidão do Whastzap para seus amigos via chamada telefônica

– Southbank Software apresenta dbKoda: uma ferramenta de desenvolvimento Open Source para MongoDB

– Começando com React Native

– React Native Do Zero Ao Profissional, Curso Sobre Criação De Apps React Native Para Android e IOS

– React: Tutoriais Fantásticos e Onde Habitam

– React – O que é Shadow DOM

– O que são middlewares em NodeJS?

– Conhecendo os super poderes dos comandos Git e GitHub

Web

Artigos e dicas sobre desenvolvimento web que você vai gostar:

– 6 TENDÊNCIAS DE UX DESIGN PARA OS PRÓXIMOS ANOS

– UX – User Experience ou Experiência do Usuário – Princípios

– Usabilidade: Tela com muitas informações ou distribuídas em várias telas?

– Entenda as diferenças entre Wireframe, Protótipo e Mockup?

Estatísticas de SEO, novas regras do Google para 2019 e Automação de Marketing Digital

– Bootstrap – O que são grids CSS

– Quando usar ANSI e quando usar UTF-8

– W3C anuncia o DRM como uma recomendação

– Crie um loading animado divertido usando CSS3

– Como descobrir se uma cor hexadecimal é escura ou clara

– Como usar tags semânticas

– O que é o GZIP e como melhora a velocidade de um site

– Como adicionar notificações (Push notification) em seu site

Powered by Rock Convert
Siga os bons!
Últimos posts por Ramos de Souza Janones (exibir todos)