O que é um Grid System?

Uma grid é simplesmente uma coleção de linhas horizontais e verticais criando um padrão no qual podemos alinhar nossos elementos de design. Grids nos ajudam a criar projetos onde os elementos não pulam ou alteram a largura à medida que nos movemos de página para página, proporcionando maior consistência em nossos sites.

Como funciona?

Como dito, Grid Systems são usado para criar layouts através de uma série de linhas e colunas que abrigam conteúdo. Agora veja como os Grid System do GanTime funcionam:

• Todos os sistemas são baseados em colunas. 12 colunas.
• Cada coluna pode ocupar o espaço correspondente a (1..12)/12 colunas. Isso mesmo, de 1 até 12 colunas.
• O espaço ocupado por uma coluna pode variar de acordo com a classe para determinar largura que aplicarmos a ela.
• Recomendamos que as colunas sejam colocadas dentro de uma div com a classe .row, e apenas colunas devem ser filhas diretas de .row.
• Se o espaço correspondente a 12 colunas for ultrapassado em uma .row, uma nova linha é gerada automagicamente com as colunas que ultrapassam o limite de 12.
• Existem três comportamentos possíveis para as colunas de uma .row:
  • O primeiro é o comportamento natural das colunas filhas de row, que determina uma largura baseada na classe escolhida para determinar largura, e margins de 5px à direita e à esquerda de uma coluna, o que provoca um gutter, espaçamento, calha, de 10 px entre uma coluna e outra.
  • O segundo comportamento é ativado quando, junto com a classe .row, aplicamos a classe .false-gutter, que ao invés de aplicar 5px de margins laterais nas colunas, aplica padding de 5px à direita e à esquerda de cada coluna, gerando um falso espaçamento entre uma coluna e outra.
  • O terceiro comportamento é ativado quando, junto com a classe .row, aplicamos a classe .flex-box, que faz com que colunas em uma mesma linha tenham a mesma altura.

Opções para construir com GS

Demonstração do Grid System

  <div
  class="row">

  
    <div
    class="xs-8">...</div>
  
  
    <div
    class="xs-4">...</div>
  

  </div>

  <div
  class="row false-gutter">

  
    <div
    class="xs-8">...</div>
  
  
    <div
    class="xs-4">...</div>
  

  </div>

  <div
  class="row flex-box">

  
    <div
    class="xs-8">...</div>
  
  
    <div
    class="xs-4">...</div>
  

  </div>

  <div
  class="row flex-box">

  
    <div
    class="xs-10">
  
    
      <div
      class="xs-4"></div>
    
    
      <div
      class="xs-4"></div>
    
    
      <div
      class="xs-4"></div>
    
  
    </div>
  
  
    <div
    class="xs-2">
  
    
      <div
      class="xs-12"></div>
    
  
    </div>
  

  </div>

Deslocadores

Você pode deslocar suas colunas através do Grid System, e para isso basta adicionar uma classe de largura com o prefixo off à sua coluna. É isso mesmo, você já tem a sua coluna (.xs-1, .sm-5, .md6, .lg-9, por exemplo), agora você adiciona a classe correspondente ao quanto você precisa afastá-la, respeitando sempre o limite de 12 colunas.

  <div
  class="row">

  
    <div
    class="off-xs-4 xs-4">...</div>
  

  </div>

Ocultadores

Quando estamos trabalhando com responsividade, é comum que queiramos ocultar elementos. Pensando nisso, criamos os ocultadores. Eles aplicam display: none!important.

Exibidores

Bom, como as vezes queremos que algo não seja exibido em determinada largura, as vezes queremos o contrário. Pensando nisso, criamos os exibidores. Eles aplicam display: inline.