Grid

Como funciona

A estrutura de grid se baseia nos princípios Bootstrap de divisão em 12 colunas*. Primeiro crie um objeto div com a classe row. Dentro dele, crie um outro objeto div com a classe col. Em seguida, informe quais dimensões deseja aplicar da seguinte forma.

* O número 12 é ótimo para ser utilizado como padrão de divisão de layout, pois ele é divisível por 2, por 3, por 4 e por 6. Isso ajuda muito!

<div class="row center-align">
  <div class="col s1">s1</div>
  <div class="col s1">s1</div>
  <div class="col s1">s1</div>
  <div class="col s1">s1</div>
  <div class="col s1">s1</div>
  <div class="col s1">s1</div>
  <div class="col s1">s1</div>
  <div class="col s1">s1</div>
  <div class="col s1">s1</div>
  <div class="col s1">s1</div>
  <div class="col s1">s1</div>
  <div class="col s1">s1</div>
</div>

Numeração

A numeração indica a largura proporcional que terá o seu objeto.

<div class="row center-align">
  <div class="col s12">s12</div>
  <div class="col s6">s6</div>
  <div class="col s6">s6</div>
  <div class="col s4">s4</div>
  <div class="col s4">s4</div>
  <div class="col s4">s4</div>
  <div class="col s3">s3</div>
  <div class="col s3">s3</div>
  <div class="col s3">s3</div>
  <div class="col s3">s3</div>
</div>

Diferentes tamanhos de tela

O s define a medida do seu objeto quando a tela for menor que 400px ou em todos os casos, quando não houver algum outra definição para o objeto. Se você acrescentar o m seguido de um número de 1 a 12, após o s, você definirá a medida do seu objeto quando a tela for maior que 400px ou menor que 800px. O l define o mesmo padrão para telas acima de 800px. Para ver o exemplo, redimensione o browser.

<div class="row center-align">
  <div class="s12 m6 l3">s12 m6 l3</div>
  <div class="s12 m6 l9">s12 m6 l9</div>
</div>

Redimensione o seu navegador para ver os objetos se comportarem conforme descrito.

Classe push

A classe push serve pra empurrar o conteúdo. A classe push-s3, por exemplo, cria uma margem à esquerda e empurra o objeto classe col para a direita.

<div class="row center-align">
  <div class="col s12 m9 push-m3 l6 push-l6">
    <p>col s12 m6 push-m6 l6 push-l3</p>
  </div>
</div>

Classe container

A classe container cria uma área central inicialmente com largura de 75% da página. Se o tamanho da tela for menor que 800px, a largura passa a ser 90%. Se o tamanho da tela for menor que 400px, a largura passa a ser 100%.

<div class="row center-align">
  <div class="col s12">
    <p>row area</p>
  </div>
</div>
<div class="row center-align">
  <div class="col s12">
    <div class="container">
      <p>container area</p>
    </div>
  </div>
</div>

Responsividade

Se você precisar criar ou alterar alguma classe no seu código, considere o seguinte padrão CSS.

p {
  font-size: 1.2vw;
}
@media (max-width: 800px) {
  p {
    font-size: 3vw;
  }
}
@media (max-width: 400px) {
  p {
    font-size: 6vw;
  }
}