Studio Two 編輯器：使用儲存格和格線

重新排列現有儲存格，無需將任何元件移出儲存格。選項會依目前的儲存格數量調整，因此清單只會建議適用的排列方式。

檢驗器中顯示的內容取決於目前的區段格線：

• 如果區段格線只有 1 個儲存格，可在「選擇版面配置」下方選擇包含更多儲存格的版面配置。

• 如果格線有多個儲存格，可點擊「變更版面配置」下拉式選單，然後選擇版面配置（列、欄、拼貼或卡片）。
  注意：可用的版面配置取決於區段格線中的儲存格數量。例如，「卡片」版面配置僅適用於包含 4 個儲存格的格線。
  
  

需要其他儲存格時，可延伸格線。新增時可選擇要將儲存格放在格線的哪一側。

點擊操作列上的「版面配置」，然後在「新增儲存格」下方選擇新增儲存格的方向：右側 、左側 、上方 或下方 。

若要刪除儲存格，請在畫布上以滑鼠右鍵點擊該儲存格，然後選擇「刪除」，或按下鍵盤上的「刪除」鍵。此操作也會刪除目前位於儲存格中的元件。

將 1 個儲存格拆分為兩個。部分元件可能會移動，以整齊放入儲存格中，但仍可隨時在畫布上變更元件位置。

在畫布上選擇儲存格，接著在檢驗器的 拆分儲存格旁選擇相關選項：拆分橫向或拆分垂直。

小提醒：

也可點擊操作列上的相同圖示來拆分儲存格。

將 2 個儲存格合併為一個，或交換兩者的位置。只有位於同一列或同一欄的儲存格才能合併，但任意 2 個儲存格皆可交換。

1. 點擊第一個儲存格。

2. 按住 Shift 鍵，同時點擊第二個儲存格。

3. 點擊操作列上的合併或交換。
   
   

整理格線比例，或反轉儲存格的顯示順序。翻轉可快速測試不同的版面組合，因為儲存格及其中的元件會一起移動。

在檢驗器的調整格線旁選擇相關選項：

• 欄等寬：讓每一欄的寬度相同。

• 列等高：讓每一列的高度相同。

• 翻轉欄：反轉欄的順序。

• 翻轉列：反轉列的順序。
  
  

小提醒：

操作列也提供這些操作。點擊版面配置，再點擊調整格線旁的相關圖示。

自行控制列高，同時保留區段格線。編輯器預設會自動調整列的大小，也可隨時改回由編輯器自動設定間距。

如果區段有超過 1 個儲存格，請先選擇相關儲存格。接著點擊垂直間距下拉式選單，選擇手動；若要交由編輯器調整大小，請選擇自動。

注意：

如果區段的回應式行為設為「調整成螢幕大小」，垂直間距會預先設為手動。

從版面配置下拉式選單選擇新外觀，重新排列格線中的儲存格。系統會根據目前的列數和欄數列出可用的版面配置，提供不同的排列方式。

小提醒：

也可從操作列進行設定。點擊版面配置下拉式選單（其中會顯示目前的格線大小，例如 2x2），然後選擇新外觀。

自行設定每列和每欄的大小，並使用適合的單位。

1. 點擊 「欄／列」即可查看完整清單。

2. 在相關列或欄的編號旁輸入大小和單位。
   
   
   

小提醒：

您也可以直接在畫布上調整列與欄的大小。點擊操作列上的 「在畫布上自訂格線」圖示 ，再將格線拖曳到所需位置。元件將維持原位。

建立格線後，仍可變更其結構。新增列或欄時，元件可能會移位，以騰出空間。

1. 點擊 「欄／列」即可查看完整清單。

2. 點擊相關欄／列旁的 「更多操作」圖示 。

3. 選擇相關選項：

   • 欄：「在左側新增欄」、「在右側新增欄」或「刪除欄」。

   • 列：「在上方新增列」、「在下方新增列」或「刪除列」。
     
     

小提醒：

• 您也可以直接在畫布上新增列與欄。點擊操作列上的 「在畫布上自訂格線」圖示 ，再從格線左側或頂端邊緣拖曳，即可新增格線。元件將維持原位。

• 無法刪除格線中的最後一欄／列。只有一欄／列時，「刪除欄」／「刪除列」將無法使用。

拉開列與欄之間的距離。在 「間隙」旁輸入所需數值，再點擊目前的單位即可切換成其他單位。例如，如果 vw 更合適，可將 px* 切換為 vw。

可為兩個間隙（橫向和垂直）使用相同單位，也可分別選擇不同單位。

無需在畫布上拖曳，即可重新放置元件，或將元件伸展至多個儲存格。

1. 選擇要移動的元件。

2. （在檢驗器中）向下捲動至 「位置」。

3. 點擊 「格線儲存格中的位置」下方的相關儲存格。
   提示：按住 Shift 鍵並點擊要延伸到的儲存格，即可將元件伸展至多個儲存格。
   
   

區段格線最多可容納 16 個儲存格；達到上限後，新增儲存格便無法使用。

如果設計需要更多儲存格，可將內容拆分至 2 個區段，或手動編輯 CSS 格線並建立所需結構。

不需要。可在區段格線中將垂直間距設為手動，自行控制高度。

手動編輯 CSS 格線會帶來較大的變動。這會完全取代區段格線，讓每一列和每一欄都能使用自行設定的數值。需要使用回應式尺寸單位，或預設版面配置無法提供所需結構時，可採用此方式。