Grid Container Power Apps Canvas: layouts responsivos sem containers aninhados

O Grid Container no Power Apps Canvas é uma das adições mais esperadas da plataforma: um container que funciona nas duas direções — horizontal e vertical — simultaneamente, como uma grade (grid). Com ele, você define colunas e linhas e posiciona cada elemento exatamente onde quer, sem empilhar containers uns dentro dos outros. Neste artigo, você aprende o que é, como funciona, e como usar o Grid Container para criar dashboards e layouts complexos em minutos.

O que é o Grid Container no Power Apps Canvas?

O Grid Container é um novo objeto nativo do Power Apps Canvas que traz o conceito de CSS Grid para o desenvolvimento low-code. Com ele, você define uma grade de linhas e colunas, e cada elemento filho ocupa uma ou mais células dessa grade.

Isso representa uma mudança significativa em relação ao container convencional, que força uma escolha: o layout vai na horizontal (lado a lado) ou na vertical (empilhado). O Grid Container elimina essa limitação.

Atenção: no momento do vídeo, o Grid Container ainda estava em preview. Em objetos em preview, podem existir bugs e comportamentos inesperados. Recomenda-se testar, mas não usar em produção até o recurso ser marcado como disponível.

Grid Container vs. Container convencional: qual a diferença?

Para entender o valor do Grid Container, é importante comparar com o container tradicional:

• Container convencional: determina se os filhos ficam lado a lado (horizontal) ou empilhados (vertical). Para layouts mistos, é preciso aninhar containers — um horizontal dentro de um vertical, por exemplo.
• Grid Container: define uma grade de N colunas × N linhas. Cada elemento filho declara em qual célula (ou conjunto de células) ele fica. Um único Grid Container substitui estruturas complexas de containers aninhados.

Para dashboards corporativos — com cabeçalho, painel lateral, área central e rodapé — o Grid Container é dramaticamente mais simples.

Propriedades principais do Grid Container

Gap

A propriedade Gap define o espaçamento entre os objetos dentro do container. Funciona como o gap do CSS Grid: um valor único que afeta horizontal e verticalmente. Quanto maior o valor, mais espaço entre os itens da grade.

Columns e Rows

As propriedades Columns e Rows definem quantas colunas e linhas a grade tem. Por exemplo, Columns = 3 e Rows = 3 cria uma grade 3×3. Os elementos filhos são distribuídos automaticamente seguindo a ordem da árvore do container — ou você pode definir manualmente a posição de cada um.

Como posicionar elementos dentro do Grid Container

Cada elemento filho dentro do Grid Container tem propriedades específicas de posicionamento na grade:

• Column start / Column end: define em qual coluna o elemento começa e termina
• Row start / Row end: define em qual linha começa e termina

A lógica de início e fim segue o mesmo padrão do CSS Grid: o valor de fim é a linha seguinte ao último espaço que você quer ocupar. Exemplos:

• Para ocupar as colunas 1, 2 e 3 (numa grade de 3 colunas): Column start = 1, Column end = 4
• Para ocupar apenas a coluna 2: Column start = 2, Column end = 3

Se os campos ficarem em 0, o elemento segue o posicionamento automático pela ordem da árvore do container.

Caso prático: criando um dashboard com Grid Container

Imagine um dashboard com esta estrutura:

• Linha 1: Menu/cabeçalho ocupando toda a largura (3 colunas)
• Linha 2: Três cards lado a lado (1 card por coluna)
• Linha 3: Painel de rodapé ocupando toda a largura

Com o container convencional, isso exigiria pelo menos 3 containers aninhados. Com o Grid Container, é um único objeto:

1. Configure: Columns = 3, Rows = 3
2. Adicione o botão de menu e configure: Column start = 1, Column end = 4 (ocupa as 3 colunas)
3. Adicione 3 cards — sem configurar posição (automático pela ordem: cada um vai para uma coluna da linha 2)
4. Adicione o painel de rodapé e configure: Column start = 1, Column end = 4

Resultado: layout de dashboard completo em um único container, sem aninhamento.

Ajustando proporções com Rows e spans

Você pode dar mais espaço ao painel central aumentando o número de linhas do container e estendendo o span do elemento:

• Mude Rows = 5 no Grid Container
• No painel central, configure Row start = 2, Row end = 5 — ele ocupa 3 das 5 linhas

Dessa forma, o painel central fica visualmente maior sem precisar alterar o tamanho de nenhum outro elemento manualmente.

Cuidados com o Grid Container em preview

Por estar em preview, o Grid Container tem alguns comportamentos a observar:

• Overflow de linhas: se um elemento configurar Row end além do total de linhas do container, ele sobrescreve os elementos abaixo e empurra tudo para fora da área visível. Certifique-se de que os spans dos filhos não excedam as linhas definidas no container.
• Produção: evite usar em produção até o recurso sair do preview e ser estabilizado pela Microsoft.
• Bugs conhecidos: como todo preview, podem aparecer comportamentos inesperados. Teste cada layout antes de finalizar.

Quando usar o Grid Container no Power Apps Canvas

O Grid Container é a escolha ideal quando você precisa de:

• Dashboards com cabeçalho, múltiplos cards e rodapé
• Telas de menu com atalhos organizados em grade
• Formulários complexos com seções em colunas
• Layouts responsivos onde os elementos precisam se ajustar dinamicamente

Para telas simples com apenas um eixo (lista vertical ou itens horizontais), o container convencional ainda é suficiente — e mais simples de configurar.

Perguntas Frequentes

O Grid Container já está disponível para todos no Power Apps?

O Grid Container foi lançado em preview. Isso significa que está disponível para testes, mas pode não estar habilitado em todos os tenants ou ambientes. Verifique nas configurações do Power Apps se o recurso aparece como disponível. Para produção, aguarde a saída do preview.

Qual a diferença entre Grid Container e Container convencional no Power Apps?

O Container convencional força um layout unidirecional: ou horizontal ou vertical. O Grid Container define uma grade bidimensional com linhas e colunas, e cada elemento filho ocupa células específicas da grade. Isso elimina a necessidade de aninhar vários containers para criar layouts complexos.

Posso usar o Grid Container dentro de uma Galeria?

Sim, é possível inserir um Grid Container no template de uma galeria. No entanto, como ainda está em preview, o comportamento pode variar. Faça testes em ambiente de desenvolvimento antes de usar em galerias com dados críticos de produção.

O que acontece se o Row end de um elemento ultrapassar o total de linhas do Grid Container?

O elemento sobrescreve os demais e empurra os outros elementos para fora da área visível. Sempre certifique-se de que o valor de Row end e Column end dos filhos não excedam o número de linhas e colunas configurado no Grid Container pai.

O Gap do Grid Container funciona igual ao CSS Grid gap?

Sim, a propriedade Gap funciona de forma análoga ao gap do CSS Grid: define o espaçamento entre os itens na grade, tanto horizontal quanto verticalmente, com um único valor. Quanto maior o número, maior o espaço entre os elementos da grade.

Conclusão

O Grid Container no Power Apps Canvas representa uma evolução significativa para quem precisa criar interfaces complexas sem sair do low-code. Com ele, dashboards e telas de menu que antes exigiam containers aninhados e horas de ajuste podem ser montados em minutos com uma estrutura limpa e fácil de manter.

Assista ao vídeo acima para ver a demonstração completa e acompanhe o canal para mais novidades do Power Apps Canvas. Para aprender Power Apps, Power Automate, Copilot Studio e mais, conheça a Formação VICO Power.