網格和表格布局

與 UIListLayout 相比，UIGridLayout 和 UITableLayout 允許更結構化和有組織的布局。這些最適合像商店庫存這樣的介面，每個項目可以被呈現在相同大小的磚格中，或項目可以被排序到相關的行/列中。

網格布局

UIGridLayout 位置姐妹 GuiObjects 在父容器內的相同尺寸的磚格內的單元細胞。細胞由行或列依據布局的 FillDirection 直到下一個細胞不能裝入，然後開始新的行或列。若要進一步控制，您可以使用 FillDirectionMaxCells 屬性來設置每行或列的最大細胞數。

預設情況下，UIGridLayout位置姐妹GuiObjects在其LayoutOrder值低於高值的情況下排序，等值排序依照您添加它們的順序排序。如果你將布局的 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 的 UDim2.new(0.25, 0, 0.1, 0) 會在父容器內創建 25% 寬度和 10% 高度的表單細胞。