Grid 容器控制功能讓你能以格狀排列子元件。 你可以精確控制每個元件在列和欄的位置。
這個容器的運作方式類似 CSS 風格的網格。 你可以定義列 和欄 ，並利用子元件的屬性設定每個子元件的精確位置。
Description
Grid 容器控制為畫布應用程式提供靈活的版面配置系統。 這可讓您：
- 將子元件置於網格模式中
- 指定每個子節點的列與列起始與結束
- 當容器或螢幕尺寸改變時，做出回應式調整
- 控制對齊、間距與網格內溢位
採用這種方法後，你不需要手動調整每個元件的位置。 你的應用程式變得 更易維護且反應更快。
Display properties
- 間隙（Gap ）——網格內子元件間像素間距。
- 欄數 – 格狀佈局中的欄數。
- 列 數 – 格子佈局中的列數。
大小與位置
- X – 從父容器左邊（若無父容器則為螢幕）的水平距離。
- Y – 從父容器頂端（若無父容器則為螢幕）的垂直距離。
- 寬度 – 控制項的左右邊緣之間的距離。
- 高度 – 控制項頂部和底部邊緣之間的距離。
- 填充（Padding ）-容器邊緣與子元件之間的間距。
色彩和框線
- 顏色 – 容器的前景色，若適用，用於邊框和文字。
-
Border
- 風格 – 邊框類型：實心、點線、點線或無邊框。
- 厚度 ——邊框的寬度（像素數）。
- 顏色 ——邊框的顏色。
- 邊界半徑 ——貨櫃角部圓滑的程度。 你可以統一套用這個設定到所有角落，或在進階設定中拆分成多個角落。
- 陰影 ——將陰影效果套用到容器上。 選項：無、輕型、中型或重型。
Visibility
- 可見 – 格狀容器是否被顯示。 切換開關。
格子配置屬性（子節點專用）
- 欄位起始/欄位結束 – 定義子元件的起始與結束欄位。
- 列起始 / 列結束 – 定義子元件的起始與結束列。
Example
從零開始用響應式版面打造一個空白畫布應用程式。
建立一個新螢幕。
從 Insert 窗格的 Layout 中，選擇 Grid 容器。
將容器屬性設定為佔據整個螢幕：
- X = 0
- Y = 0
- 寬度 = 上層寬度
- 身高 = 父體。身高
新增多個子元件，如按鈕、文字輸入、圖示和媒體。 對每個子節點，設定格網格放置屬性：
- 欄位起點/結束
- 排起點/結束
- 在細胞內對齊
按 F5 預覽。 調整螢幕大小，觀察子元件 如何保持在格子位置 並做出相應調整。