LESSON-09 · TOPIC 02
能以矩形 named areas 表達 header、sidebar、main 的版面責任，並讓各 item 對應正確區域。
能以矩形 named areas 表達 header、sidebar、main 的版面責任，並讓各 item 對應正確區域。
area 名稱比匿名 line number 更能傳達版面意圖；非矩形或拼字不一致會使整個 template declaration 無效。
要修改的檔案：files/starter/style.css
定位：在 Computed 讀 grid-template-areas，再核對每個 item 的 grid-area 拼字。｜依 starter-2 定位，只修改「grid-template-areas」的責任。
先結果，再原理；完成後要能說出自己看見的證據。
兩欄後台版面使用大量 grid-column line numbers，維護者看不出每個區塊責任。
起始狀態：container 有兩欄但 grid-template-areas:none；三個 items 已具 grid-area 名稱。
runtime 的 grid-template-areas 由 none 變成包含 header header 與 sidebar main 的矩形定義。
驗收證據：runtime before=none；after 包含 "header header" 與 "sidebar main"；property=grid-template-areas
頁面 shell 或 dashboard 有清楚區域責任，且希望 CSS 一眼表達結構時。
常見混淆：area name 不是 HTML id；它只存在於 Grid formatting context 的 CSS placement。
這段程式是理解起點，不是要你直接跳過 Starter。
先替版面格子取名字，再讓每個元件說自己要住進哪個區域。
正式說法：grid-template-areas defines named grid areas as strings；each named area must form a single filled rectangle, and items use grid-area to occupy it。
.layout{grid-template-areas:"header header" "sidebar main"}.site-header{grid-area:header}每一步都留下可觀察結果；如果沒看到，先看「卡住先查」。
檔案：files/starter/style.css 定位：在 Computed 讀 grid-template-areas，再核對每個 item 的 grid-area 拼字。
要做：先重新載入 Starter，記錄目前畫面、DOM、Computed、Console 或文件內容。
預期：能指出「在 Computed 讀 grid-template-areas，再核對每個 item 的 grid-area 拼字。」目前的缺口。
證據：保存 files/starter/style.css 的目前狀態，並指出下一步只會修改哪個檔案責任。
卡住先查：確認開啟的是 files/starter/style.css，且定位到 在 Computed 讀 grid-template-areas，再核對每個 item 的 grid-area 拼字。。
檔案：files/starter/style.css 定位：在 Computed 讀 grid-template-areas，再核對每個 item 的 grid-area 拼字。
要做：執行實驗替 Grid container 切換 named-areas class，讀取 computed grid-template-areas。
預期：runtime 的 grid-template-areas 由 none 變成包含 header header 與 sidebar main 的矩形定義。
證據：runtime before=none；after 包含 "header header" 與 "sidebar main"；property=grid-template-areas
卡住先查：在 Computed 讀 grid-template-areas，再核對每個 item 的 grid-area 拼字。
檔案：files/starter/style.css 定位：在 Computed 讀 grid-template-areas，再核對每個 item 的 grid-area 拼字。
要做：重新整理頁面，再逐項比對預期結果與 evidence。
預期：runtime 的 grid-template-areas 由 none 變成包含 header header 與 sidebar main 的矩形定義。
證據：runtime before=none；after 包含 "header header" 與 "sidebar main"；property=grid-template-areas
卡住先查：在 Computed 讀 grid-template-areas，再核對每個 item 的 grid-area 拼字。
這個示範只讓你看懂概念，不會替你修改 Starter，也不會自動宣告完成。
勾選只是學習紀錄；真正完成仍要回到 Starter 的實際結果。
先畫成每列同欄數的字串矩陣。
header 橫跨兩欄；第二列是 sidebar 與 main。
完整解答與原因：`header header` 形成完整矩形，第二列 `sidebar main` 各佔一格；items 以相同名稱對應區域。