# Grid

Grids podem ser definidos como um conjunto de linhas verticais, horizontais (colunas) e espaçamentos (gutters) que auxiliam designers e desenvolvedores a organizarem informações de uma estrutura.

# Definição

Com o sistema de grids é possível projetar interfaces com mais facilidade e simplicidade, dando ao layout proporções mais harmoniosas ao posicionar elementos de forma balanceada. Um grid é composto por 3 partes essenciais, são elas:

# Colunas

São seções verticais do grid responsáveis por adaptar o conteúdo em qualquer tamanho de tela. Por padrão, no NoZebra usamos 12 colunas com gutter de 24 pixels para cada lado em dispositivos a partir de 960 pixels, 8 colunas para dispositivos com até 768 pixels e 4 colunas para dispositivos com resolução inferior a 576 pixels.

# Linhas

São seções horizontais do grid, servem principalmente para montar padrões de espaçamento de texto.

# Gutters

São espaçamentos entre colunas. Se o espaçamento entre as colunas é de 24 pixels, cada coluna terá um gutter de 12 pixels de cada lado.

# Grade Base

Assim como no espaçamento, usamos um Base Grid de 4 pontos (4px) que é ótimo para desenvolver interfaces responsivas e garantir consistência. Ela define margens e padrões de maneira fluída entre os componentes e o layout, de modo que tanto as dimensões quanto as distâncias serão sempre múltiplos de 8: 4, 8, 12, 16, 20, 24, 28… ajudando a eliminar a adivinhação em relação ao espaço entre os elementos e a criar um fluxo suave e legível de uma página para outra.

Nosso grid é construído para comportar as complexidades dos sites, sendo assim, quebramos componentes em seções, a fim de garantir uma melhor hierarquia visual e facilitar o trabalho do time de desenvolvimento ao adaptar o layout para diversas resoluções de tela.

# Breakpoints

# Uso

SCSS:

@media #{$token-media-query-sm} {
  display: none;
}

Classes Utilitárias:

<div class="hidden md--block">...</div>