Studio 編輯器：使用進階 CSS 格線
5 分鐘
在 Studio 編輯器中，您可以使用進階 CSS 格線來整理元件和區段的版面配置。您可以選擇所需的列與欄數字，並使用回應式要比較的項目（例如：五、最小／極致、％）來設定其大小。
前往 Wix Studio 學院 即可觀看更多 Wix Studio 網路研討會、教學影片和課程。
從區段格線切換為 CSS 格線
編輯器中的區段內建區段格線。這是進階格線的易用版本，基於相同的 CSS 邏輯。切換至進階 CSS 格線可讓您針對每個斷點更精確地控制版面配置。
請留意：
切換後即無法返回區段格線。不過，若剛完成該小部件，您可使用編輯器右上方之 復原 按鈕 
。
。若要從區段格線切換為 CSS 格線：
- 選擇相關區段。
- 點擊編輯器右上方「開啟檢驗器」圖示
。
- 向下捲動至 版面配置。
- 點擊 進階 CSS 格線 旁的 切換。
- 點擊 切換至 CSS 格線。
後續操作
透過檢驗器面板自訂列、欄和間距。您也可以在畫布上拖曳格線來移動位置。
在其他元件上套用 CSS 格線
您可將 CSS 格線套用至容器、快顯、FlexBox 和重複器項目。特別是在重複器元件中，一旦將格線套用至一個品項，其餘品項就會自動更新。
若要套用 CSS 格線：
- 在編輯器中選取相關元件。
- 點擊 更多操作 圖示
。 - 點擊 套用進階 CSS 格線。
- 從 1x1 下拉式選單中選擇版面配置。
提示： 若要自行設定列數和欄數，請選擇 其他。
後續操作
透過檢驗器面板自訂列、欄和間距。您也可以在畫布上拖曳格線來移動位置。
自訂 CSS 格線
自訂格線以獲得所需的精確版面配置。您可以變更列與欄的數字，並調整其大小與間隙。
若要自訂 CSS 格線：
- 選擇相關元件或區段。
- 選擇自訂格線的方式：
選擇不同的版面配置
新增更多列與欄
。
即可看到此選項。 
變更欄或列的大小
刪除欄或列
。
編輯間隙大小
請留意：
無法從區段中移除 CSS 格線。若刪除所有列／欄，格線將恢復為 1x1。
使用斷點：
設計會從桌面版向較小的斷點串聯。建議針對各個斷點調整格線，確保元件構圖完美無瑕。在下方範例中，我們為每個斷點設定了不同的版面配置（桌面版為 3 欄，平板版則為 3 列）。
在格線中定位元件
在將元件新增至格線時，多種工具可協助您更準確地設定其位置。
固定元件
將元件停靠至格線可確保其位置完全符合需求。在 Studio 編輯器中，所有元件都會自動停靠，但您可手動調整停靠方式並新增邊距。
在格線儲存格之間移動元件
在檢驗器的 位置 區段下，您可以選擇元件並查看其所在的格線儲存格。點擊任何格線儲存格即可將元件移動至該處，無需使用拖放功能。
您也可以輸入特定的欄與列數字，這在需要將元件放置在多個格線儲存格上時非常有用。
格線單位桌次
使用全系列的 CSS 單位來建立格線。您可以使用百分比、分數或 Pix 來設定欄與列的大小。或者，設定欄與列的最小和極致大小，或使用計算來建立所需的格線。
百分比（％）
五 (fr)
自動
像素 (px)
視窗寬度與高度（vw 與 vh）
最小與極致內容
最小／極致
計算
正在處理重疊元件？
請檢閱 疑難排解影片 以了解檢查項目與解決此問題的方法。