css Explicando Grid Sistem Materialize Css

[FrontD 2]

Bom vou explicar um pouco sobre o que é um Grid System e como usar o grid do materialize css

O que é o Materialize?

Materialize css é um framework css similar ao Bootstrap, surgiu através de um projeto desenvolvido pela Google, sua diferença com os outros frameworks do genero é que ele se baseia no Material Design para propor suas ferramentas o que o torna muito interessante e traz um aspecto limpo à página.

 

O que é o Grid System?

O sistema de grid é um controle de posicionamento de elementos da page que auxilia desenvolvedor web na criação de pages responsivas e como já dito no controle mais preciso dos elementos, essa ferramenta também está presente no bootstrap css, mas neste post vou estar direcionando minha explicação apenas para o materialize.

 

 

Como usar o Grid System?

OBS: (É NECESSÁRIO QUE VOCÊ FAÇA A IMPORTAÇÃO DO ARQUIVO CSS DO MATERIALIZE NO DOCUMENTO DESEJADO VOCÊ PODE BAIXAR PELO SITE OFICIAL DO MATERIALIZE

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

OU UTILIZAR AS CDN'S COMO SERÁ FEITO NESSA EXPLICAÇÃO)

[spoiler=Exemplo da inserção do código:]

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

 

Bom basicamente o grid trabalha com um sistema de 12 colunas em 1 linha como no exemplo a seguir:

 

 

este é um exemplo composto por 12 colunas em uma linha ou melhor dizendo 12 cols em 1 row definidas por meio do grid system

[spoiler=O código pra essa composição é: ]

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

 

No exemplo acima criamos uma div com a classe "row" ela representa nossa linha

e dentro da div "row" temos 12 divs representadas pela classe "col s1" cada col representa uma posição de coluna, a classe "s1" vai ser explicada mais adiante, temos a liberdade para escolher como vamos trabalhar com cada col, por exemplo podemos escolher trabalhar com apenas 2 colunas que ocupam 6 posições exemplo:

 

 

[spoiler=O código que representa essa composição é:]

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

 

Mas podemos fazer coisas muito mais poderosas do que somente posicionar elementos pra um tipo de resolução, temos a oportunidade de trabalhar de maneira mais fácil com os conceitos responsivos utilizando as Screen Sizes

 

 

A classe "s1" ou "s6" utilizada nada mais é do que um prefixo estipulado pelo framework para auxiliar no trabalho responsivo, cada prefixo tem sua utilidade por exemplo o ".m" vai trabalhar em específico com dispositivos de média resolução como kindles, tablets e por ai vai..., o ".s" vai trabalhar sobre dispositivos menores como celulares, galaxy, iphone etc...

 

Finalizando

Podemos impulsionar a qualidade da nossa produção utilizando sabiamente a ferramenta de grid, esse é meu primeiro post aqui na webcheats desde já peço desculpas por qualquer erro na produção dessa explicação, para aqueles que desejam se aprofundar ainda mais nessa ferramenta ou conhecer melhor o materialize, até mesmo aqueles que não entenderam bem minha explicação segue o link da documentação oficial nos créditos.

[spoiler=Créditos]

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se