Grid Next
Visão geral
O Grid fornece as bases para o posicionamento de elementos. Ajuda a criar interfaces mais consistentes e harmoniosas, facilitando a leitura e o entendimento do conteúdo.
O Grid é responsável por arranjar o conteúdo principal da página de forma consistente em diferentes telas, resoluções e dispositivos.
Estrutura básica
O Grid é composto por 3 estruturas fundamentais:
- Margens
- Calhas (Gutters/Gaps)
- Colunas
Margens
As margens ficam nas extremidades direita e esquerda do Grid. No código, a margem deve ser inserada pelo componente que irá envolver o Grid.
Calhas (Gutter)
As calhas são os espaçamentos entre as colunas.
Colunas
O Grid tem por padrão 12 colunas em telas grandes, 6 em telas médias e 4 em telas pequenas.
A diagramação das páginas deve sempre respeitar o Grid.
As colunas podem variar de tamanho de acordo com a largura total da página onde o Grid está aplicado e devem ocupar.
Breakpoints
| Breakpoint | Largura de tela | Colunas | Calhas (Gutter/Gap) | Margens |
|---|---|---|---|---|
Telas pequenas (sm) | Menor ou igual a 480px | 4 | --size-spacing-04 | --size-spacing-04 |
Telas médias (md) | 481px - 1024px | 6 | --size-spacing-05 | --size-spacing-05 |
Telas grandes (lg) | Acima de 1025px | 12 | --size-spacing-05 | --size-spacing-06 |
Arranjos de layout
O Grid permite organizar o conteúdo principal da página. Elementos fora da área principal de conteúdo devem ser diagramadas utilizando InlineGroup e StackGroup.
Fixo vs Fluido
Por padrão, o Grid é fluido, permitindo que o layout ocupe a largura total disponível pelo dispositivo, mantendo a quantidade de colunas, as margens e as calhas conforme definido pelo breakpoint.
Em alguns casos, é possível definir uma largura máxima de 1280px para região que envolve o Grid.
Feedback
To report a problem, request new icons, request new component use cases, ask questions, share suggestions, or report bugs, get in touch through our Slack channel #tangram-design-system.