Em comparação com UIListLayout, UIGridLayout e UITableLayout permitem layouts mais estruturados e organizados. Estes são mais apropriados para interfaces como um inventário de loja, onde cada item pode ser apresentado em uma grade de azulejos de tamanho igual, ou itens podem ser organizados em linhas/colunas relacionadas.
Layout de grade
UIGridLayout posiciona GuiObjects irmãos em uma grade de células uniformes do mesmo tamanho dentro de seu contêiner pai. As células são adicionadas por linha ou coluna com base na FillDirection do layout até que a próxima célula não caiba, então uma nova linha ou coluna começa. Para um controle adicional, você pode usar a propriedade FillDirectionMaxCells para definir o número máximo de células por linha ou coluna.
Por padrão, UIGridLayout posiciona GuiObjects irmãos em ordem de sua LayoutOrder onde valores mais baixos vêm antes de valores mais altos, e valores iguais são organizados dependendo da ordem em que foram adicionados. Se você mudar o SortOrder do layout para Enum.SortOrder.Name, os irmãos são organizados em ordem alfabética.
Uma vez que você insere um UIGridLayout, ele substitui ou influencia a Position e/ou Size de todos os objetos UI irmãos, portanto, as mudanças nessas propriedades dentro da janela Properties ou dentro de um script não terão o efeito normal.
UIGridLayout respeita quaisquer restrições que você colocar sobre os objetos dentro da grade. Por exemplo, se um objeto tiver uma UISizeConstraint com uma propriedade MinSize que é maior que a propriedade CellSize da grade, o objeto se estenderá por várias células.
Layout de tabela
UITableLayout posiciona GuiObjects irmãos e seus filhos em formato de tabela. A FillDirection padrão de Vertical significa que os irmãos são primeiramente posicionados em linhas, e os filhos desses irmãos são posicionados horizontalmente para formar colunas, de tal maneira que cada célula dentro de uma linha tenha a mesma altura e cada célula dentro de uma coluna tenha a mesma largura.
Esse padrão imita a estrutura padrão de linha/coluna do HTML:
A menos que você ative as propriedades FillEmptySpaceColumns ou FillEmptySpaceRows do layout, o tamanho dos GuiObjects irmãos determina as dimensões das células. Por exemplo, um TextLabel de tamanho UDim2.new(0.25, 0, 0.1, 0) criará uma célula de tabela de 25% de largura e 10% de altura dentro do contêiner pai.
Uma vez que você insere um UITableLayout, ele substitui ou influencia a Position e/ou Size de todos os objetos UI irmãos, portanto, as mudanças nessas propriedades dentro da janela Properties ou dentro de um script não terão o efeito normal.
UITableLayout respeita e é responsivo a qualquer UISizeConstraint que você coloque sobre os objetos dentro da tabela. Por exemplo, se um objeto tiver uma UISizeConstraint com uma propriedade MinSize dentro de uma célula de cabeçalho, as outras células dentro da coluna terão o mesmo tamanho que a célula de cabeçalho.
Observe que se a propriedade MaxSize restringir o tamanho de uma célula de preencher o espaço designado de uma linha ou coluna que é mais larga do que a célula, o objeto se alinhará ao canto superior esquerdo da célula.