Pular para o conteúdo principal

Grid Next

Informação

Você está visualizando a documentação de um recurso next.

Para evitar conflitos de nomes, os recursos next são agrupados na documentação através do objeto Next.

Base​

O Grid combina um contêiner principal com elementos filhos do tipo Grid.Cell para estruturar o layout.

Fixo vs Fluido​

O Grid não tem uma largura definida, para limitar sua largura combine o seu uso com outros componentes. Por exemplo, para restringir a largura máxima a 1280px utilize o componente Container com o layout="contained".

Responsivo ao Container​

Por padrão, o Grid usa o breakpoint da viewport. Dentro de um Container estreito, isso pode gerar mais colunas do que o espaço disponível. Use a propriedade containerResponsive para o Grid seguir o breakpoint do Container.

Como booleano​

Passe containerResponsive para o Grid usar o breakpoint do Container ancestral mais próximo.

Como referência​

Passe um id, uma ref ou um elemento para o Grid usar o breakpoint de um Container específico. No exemplo, o Grid referencia o Container ancestral pelo id.

Colunas​

Utilize a propriedade columns para definir o número de colunas do Grid. Aceita number ou um objeto com valores por breakpoint.

Como número​

Passe um number para aplicar o mesmo número de colunas em todos os breakpoints.

Como objeto​

Passe um objeto para definir o número de colunas por breakpoint (sm, md, lg). Breakpoints omitidos herdam o valor do breakpoint anterior.

Informação

Quando um breakpoint é omitido, ele herda o valor do breakpoint anterior. Por exemplo, em columns={{ sm: 2, lg: 8 }}, md herda o valor 2 de sm, enquanto lg passa a ter o valor 8.

Dica

Redimensione a janela do navegador para observar o comportamento nos breakpoints sm, md e lg.

Espaçamento​

Utilize a propriedade gap para definir o espaçamento entre as colunas e as linhas do Grid. Aceita number, uma string, um objeto com valores por breakpoint ou um array para definir espaçamentos diferentes entre colunas e linhas.

Como número​

Passe um number para mapear o valor ao token de spacing correspondente (ex: 2 é equivalente a --size-spacing-02) em todos os breakpoints.

Como string​

Passe uma string para aplicar um valor CSS arbitrário em todos os breakpoints.

Como objeto​

Passe um objeto para definir o valor por breakpoint (sm, md, lg). Breakpoints omitidos herdam o valor do breakpoint anterior.

Como array​

Passe um array para definir espaçamentos entre colunas e linhas. O primeiro valor define o espaçamento entre colunas e o segundo, entre linhas. Cada item aceita number, string ou objeto, com as mesmas regras citadas anteriormente na seção.

Tamanho da célula​

Utilize a propriedade size do subcomponente Grid.Cell para definir o número de colunas ocupadas pela célula. Aceita number ou um objeto com valores por breakpoint.

Como número​

Passe um number para aplicar o mesmo valor em todos os breakpoints.

Como objeto​

Passe um objeto para definir o valor por breakpoint (sm, md, lg). Breakpoints omitidos herdam o valor do breakpoint anterior.

Tamanho limitado​

Quando o valor da propriedade excede o número de colunas disponíveis no Grid, a célula ocupa o máximo de colunas no Grid naquele breakpoint.

Composição com outros elementos​

Filhos diretos do Grid que não forem Grid.Cell ocupam todas as colunas disponíveis. Esses elementos não tem acesso a propriedade size.

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.