비교를 위해 UIListLayout , UIGridLayout 및 UITableLayout 는 더 구조화되고 조직화된 레이아웃을 허용합니다.이들은 각 항목이 동일한 크기의 타일 배열에서 표시되거나 관련 행/열로 정렬될 수 있는 상점 인벤토리와 같은 인터페이스에 가장 적합합니다.
그리드 레이아웃
UIGridLayout 위치 형제 GuiObjects 부모 컨테이너 내의 동일 크기의 일괄 세포 그리드에서.세포는 레이아웃의 FillDirection까지 행이나 열에 의해 추가되며, 다음 세포가 들어가지 않으면 새로운 행이나 열이 시작됩니다.자세한 제어를 위해 FillDirectionMaxCells 속성을 사용하여 행당 또는 열당 최대 세포 수를 설정할 수 있습니다.


기본적으로, 위치는 낮은 값이 높은 값 앞에 오는 순서로 형제 위치 이고, 동일한 값은 추가한 순서에 따라 정렬됩니다.레이아웃의 SortOrder 를 Enum.SortOrder.Name 로 변경하면 형제가 알파벳 순서로 정렬됩니다.
테이블 레이아웃
UITableLayout 위치 형제 GuiObjects 및 자식을 테이블 형식으로 변환합니다.기본값 FillDirection 의 Vertical 는 형제가 먼저 행에 배치되고 형제의 자녀가 가로로 배치되어 열을 형성하고, 행 내의 각 셀이 동일한 높이를 갖고 열 내의 각 셀이 동일한 너비를 갖도록 배치된다는 것을 의미합니다.


이 패턴은 표준 HTML 행/열 구조를 모방합니다:
<table><tbody><tr><!-- Row1 --><td>Label 1</td> <!-- TextLabel1 --><td>Label 2</td> <!-- TextLabel2 --><td>Label 3</td> <!-- TextLabel3 --></tr><tr><!-- Row2 --><td>Label 4</td> <!-- TextLabel4 --><td>Label 5</td> <!-- TextLabel5 --><td>Label 6</td> <!-- TextLabel6 --></tr><tr><!-- Row3 --><td>Label 7</td> <!-- TextLabel7 --><td>Label 8</td> <!-- TextLabel8 --><td>Label 9</td> <!-- TextLabel9 --></tr></tbody></table>
레이아웃의 FillEmptySpaceColumns 또는 FillEmptySpaceRows 속성을 활성화하지 않으면, 형제의 GuiObjects 크기가 세포의 크기를 결정합니다.예를 들어, 크기가 TextLabel 25%인 UDim2.new(0.25, 0, 0.1, 0) 가 부모 컨테이너 내에 25% 너비와 10% 높이의 테이블 셀을 생성합니다.