# Grid

O sistema de grids fundamenta tanto a construção de layouts quanto a estruturação de front-end, oferecendo uma maneira simples de grantir a consistência visual e hierárquica entre os componentes de um sistema.

# Estrutura básica

O sistema de grids de Stoodi se baseia em um grid de 12 colunas de larguras relativas, ocupando 100% da viewport.

# Gutter

A largura entre colunas — aqui denominada gutter — obedecem a valores absolutos e variáveis de acordo com os ranges de breakpoint especificados no item 4. viewports.

# Grid com side-panel

Quando combinado à um side-panel (com em páginas em contém o componente de menu global), o grid se adequa, em sua estrutura original de 12 colunas, à área restante de viewport não ocupada pelo side-panel.

# Breakpoints

Exceto no contexto mobile — quando o sistema de grid é simplificado em uma estrutura de 2 colunas — o grid se adequa à largura do viewport, considerando a largura máxima de 1600px.

360px

360px

A largura de gutter deve variar de acordo com as especificações abaixo: