Pular para o conteúdo principal

Grid 🗑️

Descontinuado

Este componente está descontinuado. Substitua pelo Grid next. Para mais informações sobre os recursos next leia a documentação.

Base​

Breakpoints​

Para facilitar a implementação não é necessário passar todos os breakpoints. Uma vez declarado, será aplicado o mesmo valor para os próximos breakpoints, de acordo com esta ordem:

  • smallMobile
  • mobile
  • tablet
  • desktop
  • largeDesktop

Por exemplo, se o mobile for igual a 6, tablet, desktop e largeDesktop terão esse mesmo valor se nada for declarado. Entretanto, smallMobile terá o tamanho auto.

Dica

Caso nenhum breakpoint seja definido, o grid assumirá o valor 12 para as colunas. Se não tiver espaço disponível para exibição das 12 colunas, o grid será ajustado automaticamente em novas linhas.

Mobile​

Tablet​

Desktop​

Definindo offset​

Como número​

Como objeto​

Invertendo as colunas​

Escondendo elementos de acordo com viewport​

Para esconder os elementos, use o componente Hidden.

Feedback​

Para reportar algum problema, solicitar novos ícones, solicitar novos casos de uso de componentes, tirar dúvidas, enviar sugestões ou reportar bugs, entre em contato pelo nosso canal no Slack #tangram-design-system.