Ir para conteúdo
Faça parte da equipe! (2024) ×

css Explicando Grid Sistem Materialize Css


FrontD
 Compartilhar

Posts Recomendados

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

how-to-center-your-content-with-materialize-top-800x318.png

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 https://materializecss.com/getting-started.html OU UTILIZAR AS CDN'S COMO SERÁ FEITO NESSA EXPLICAÇÃO)

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

http://jsfiddle.net/Lq0o39ay/

 

 

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

 

1qKb6Dm.png

 

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 é: ]http://jsfiddle.net/whrj8bxu/1/

 

 

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:

 

fOxl8mZ.png

 

[spoiler=O código que representa essa composição é:]http://jsfiddle.net/bn3qofpc/

 

 

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

 

t4esZCB.png

 

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]https://materializecss.com/grid.html

 

 

 

 

Link para o comentário
Compartilhar em outros sites

Este tópico está impedido de receber novos posts.
 Compartilhar

×
×
  • Criar Novo...

Informação Importante

Nós fazemos uso de cookies no seu dispositivo para ajudar a tornar este site melhor. Você pode ajustar suas configurações de cookies , caso contrário, vamos supor que você está bem para continuar.