格狀版面區塊

你可以使用格狀版面區塊對齊網站上的內容。你可以在區塊定義回應式中斷點，也就是說，你可以分別為電腦和行動裝置檢視畫面選取要在文章或頁面上並排顯示的欄位數量。

格狀版面提供放置網頁內容的結構和對齊方式，依不同檢視裝置會包含不同數量的垂直線 (回應式中斷點)：

• 桌上型電腦裝置適用 12 條格線。
• 平板電腦裝置適用 8 條格線。
• 行動裝置適用 4 條格線。

在格狀版面區塊中，格線會組合形成欄位 (1 至 4 個)，你可以將內容放置在個別欄位中。

桌上型電腦版面配置的欄位通常會在較小型的裝置上分成多列顯示。當你切換為使用平板電腦或行動裝置檢視時，系統會自動啟用此設定，但你也可以直接變更網格設定值覆寫此設定。

回應式中斷點屬於進階主題。即使對這方面不熟悉，你仍可放心使用格狀版面區塊，網格會使用預設的回應式中斷點。

若要新增格狀版面區塊，請按一下「+ 區塊插入工具」圖示，然後搜尋「格狀版面」，接著按一下即可將區塊加入文章或頁面。

如果你使用支援外掛程式的網站，請務必在「外掛程式」→「已安裝的外掛程式」啟用「格狀版面」外掛程式。

此處有新增區塊的詳細說明。 

首次新增格狀版面區塊時，系統會提示你選擇欄位數量：

你可以稍後再從區塊設定變更此設定。

網格中的個別欄位可包含其他區塊。請在個別欄位按一下「+ 區塊插入工具」圖示，然後搜尋你想新增的區塊。

按一下區塊會出現選項工具列：

格狀版面區塊的工具列有以下幾個選項：

• 變更區塊類型或樣式。
• 拖曳區塊。
• 將區塊上下移動。
• 變更區塊水平對齊方式或寬度。
• 適用於桌上型電腦、平板電腦和行動裝置的回應式中斷點。
• 變更區塊的垂直對齊方式。
• 其他選項。

按一下區塊，右側邊欄會出現其他區塊設定。如果沒有出現側邊欄，你可能需要按一下右上角的 ⚙️ (齒輪) 圖示叫出設定。

進階

進階分頁可讓你將 CSS 類別新增至區塊，以便編寫自訂 CSS，並視需要設定區塊樣式。深入了解。

格狀版面區塊中的每個欄位都有其各自的設定，你可以變更背景顏色和邊框間距。此設定只會套用至選取的個別欄位。

多數情況下，你可以調整格狀版面中欄位的大小，但是一列之中個別欄位所有位移和範圍的數值總和不得超過檢視裝置的可用格線總數量。

例如，在桌上型電腦裝置 (12 條格線) 上，三欄位版面配置中的個別欄位可各自橫跨 4 條格線且沒有位移、各自橫跨 3 條格線加上位移 1 條格線，或其中一個欄位橫跨 10 條格線，另外兩個欄位範圍各為 1 條格線。

這可以確保你的欄位不會重疊，有時候也代表你必須先減少某一處的位移和範圍數值，才能增加另一處的數值。

你可以在網格中的每個欄位旁邊看到一個有色選項，這些是拖放控點，你可以按一下並往左或往右拉動，調整區塊大小。

你也可以直接在側邊欄的區塊設定中變更位移和範圍數值，以調整格狀版面的欄位大小。

系統會在你使用拖放控點時自動調整這些數值。

當你打算調整行動裝置及平板電腦裝置上的網格大小和顯示欄位數量時，請記得個別欄位所有位移和範圍的數值總和不得超過平板電腦裝置適用的 8 條格線和行動裝置適用的 4 條格線。

在以下範例中，我們將欄位範圍設定為 2 條格線，位移設定為 0，就能分別在行動裝置和平板電腦裝置上顯示兩個和四個欄位。