Formação Oracle DBA Completa


Bootstrap – O que são grids CSS

Bootstrap – O que são grids CSS

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

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

[bloco-pai]
     |
     |----[linha]
     |       |
     |       |----[coluna]

 

LEIA TAMBÉM:  Como descobrir se uma cor hexadecimal é escura ou clara

VAI GOSTAR: Guia Jurídico Definitivo para Startups

VEJA TAMBÉM: Sucesso na Carreira com o LinkedIn

RECOMENDAMOS: Curso de Desenvolvimento de Games Completo

LEIA: Como Aprender Java e ir além do mercado de trabalho tradicional


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.

Powered by Rock Convert

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:  Drops CSS3 e HTML5 - Como criar uma Barra de progresso

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

Siga os bons!

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.

Últimos posts por Ramos de Souza Janones (exibir todos)


Frontend Do Zero Ao Profissional