Sections 版面：2026 年的預設版型怎麼用

charles

如果你的 HA 是最近才裝的，新建的儀表板預設就是 Sections。

如果你用很久了，可能還停在舊的 Masonry 版面。

這篇講 Sections 怎麼用，以及要不要換。



先講差別

Masonry（舊的預設）

• 卡片像磚牆一樣自動堆疊
  
• 你不能控制卡片放哪裡
  
• 螢幕寬度改變時，卡片會重新排列（常常排到你不想要的位置）
  
• 要控制版面只能用 vertical-stack / horizontal-stack 硬湊
  

Sections（新的預設）

• 你把卡片放進一個個區塊
  
• 區塊內的順序你說了算
  
• 螢幕變窄時，區塊會往下排，但區塊內的順序不變
  
• 有標題卡片幫你分段
  
• 卡片可以調整寬度（佔幾欄）
  

一句話：Sections 讓你真的能控制版面。

怎麼建立

• 編輯儀表板 → ＋ 新增分頁
  
• 版面類型選 Sections（區塊）
  
• 會自動給你一個區塊，直接＋ 新增卡片
  
• 要加新區塊就點「建立區塊」
  

建立區塊時會自動加一張標題卡片。
不想要標題的話把它刪掉就好，之後想加再加回來。



卡片寬度怎麼調

這是 Sections 最實用的功能。

• 滑鼠移到卡片上 → 右下角有一個拖曳把手
  
• 往左右拖就能改變它佔幾欄
  
• 預設一個區塊是 4 欄
  

實際的用法：

• 重要的卡片佔滿寬（4 欄）
  
• 次要的並排（各 2 欄）
  
• 小按鈕擠一排（各 1 欄）
  

用 YAML 的話：

1. type: sections
2. max_columns: 3
3. sections:
4.   - type: grid
5.     cards:
6.       - type: heading
7.         heading: 客廳
9.       - type: tile
10.         entity: light.living_room
11.         grid_options:
12.           columns: 12        # 12 = 滿寬
13.           rows: 1
15.       - type: tile
16.         entity: sensor.living_room_temperature
17.         grid_options:
18.           columns: 6         # 6 = 半寬
20.       - type: tile
21.         entity: sensor.living_room_humidity
22.         grid_options:
23.           columns: 6

複製代碼

注意 grid_options.columns 是以 12 為基準（不是 4）：

• 12 = 滿寬
  
• 6 = 一半
  
• 4 = 三分之一
  
• 3 = 四分之一
  

max_columns 是整個分頁最多幾個區塊並排，
在大螢幕上才看得出效果。

區塊的背景色（比較新的功能）

1. sections:
2.   - type: grid
3.     column_span: 2
4.     background:
5.       color: "#1E88E5"
6.       opacity: 8
7.     cards:
8.       - ...

複製代碼

或者用預設的顏色：

1.     background: true

複製代碼

用途：把「重要的」和「次要的」區塊視覺上分開。

不要每個區塊都上色，那樣就沒有區別了。



五個實用的配置建議

一、一個區塊 = 一個空間或一個主題

我的分法：

1. 區塊 1：現在（現在幾度、有沒有人、有沒有異常）
2. 區塊 2：客廳
3. 區塊 3：臥室
4. 區塊 4：常用場景
5. 區塊 5：狀態（電量、離線、更新）

複製代碼

不要把不相關的東西放同一個區塊。

二、標題卡片要用

沒有標題的話，捲動時你會不知道現在在看哪一段。

標題卡片還可以放徽章（下一篇會講）。

三、最重要的放最上面

手機上只看得到第一個區塊，第二個以下都要捲。

問自己：打開 App 的時候最想看到什麼？

我的答案通常是：

• 有沒有異常
  
• 室內溫度
  
• 哪些燈開著
  

四、用可見性條件隱藏不需要的

每張卡片和每個區塊都可以設「什麼時候才顯示」。

編輯卡片 → 可見性 分頁 → 加條件。

實用的例子：

• 冷氣卡片只在夏天顯示（用月份條件）
  
• 除濕機卡片只在濕度 > 70 時顯示
  
• 「異常」區塊只在真的有異常時顯示
  
• 小孩房的卡片只給特定使用者看（使用者條件）
  

這是讓儀表板保持乾淨的關鍵，
跟平面圖的 conditional 是同一個概念。

五、別做太多分頁

三頁是甜蜜點：

• 首頁 —— 日常最常看的
  
• 全部 —— 所有裝置，按房間分區塊
  
• 狀態 —— 系統健康、電量、記錄
  

超過五頁你自己都會忘記有什麼。

要不要從 Masonry 換過來



我的建議：新分頁用 Sections，舊的不用急著改。

理由：

• 沒有自動轉換功能 —— 要手動重建
  
• 舊的能用就不要動
  
• 先做一個新分頁試試，習慣了再考慮
  

真的要轉的話：

• 建一個新的 Sections 分頁
  
• 把舊分頁的 YAML 打開，卡片設定一張一張複製過去
  
• 卡片本身的設定完全相容，只是包裝不同
  
• 確認沒問題之後再刪掉舊分頁
  

不要直接改舊分頁的 type —— 那樣所有卡片會混在一起。

一個常見的困惑：type: grid 是什麼

Sections 底下的每個區塊，type 都是 grid：

1. type: sections
2. sections:
3.   - type: grid          # ← 這個
4.     cards: [...]

複製代碼

目前只有 grid 這一種區塊類型，
所以你可以把它當成固定寫法，不用想太多。

（未來可能會有其他類型，但現在就是這樣。）

---

下一篇：標題卡片的按鈕徽章 ——
2026.2 加的新功能，可以把區塊標題變成一個小型控制面板。