Figma 網格系統教學：Layout Grid 響應式排版

為什麼設計稿在桌機上對得整整齊齊，一到手機預覽就崩成東倒西歪？問題多半不在你不夠細心，而在你少了背後那套讓所有尺寸共用同一個節奏的系統。打開 Figma，左移一點、右移一點，怎麼排都覺得歪；好不容易在桌機看起來順了，切到手機，整個版面又像被搖晃過的書架。多數人這時候會用肉眼對齊、用方向鍵微調，甚至開好幾條參考線撐住畫面。這些做法不是錯，而是少了那套系統。

Figma 的 Layout Guide（舊稱 Layout Grid）能提供一致的對齊參考。Figma 在 2025 年把 Layout Grid 更名為 Layout Guide，且它和 Auto Layout 的 Grid flow 是不同功能。這篇會整理 Uniform grid、Column、Row 三種類型、欄數取捨、Constraints 與響應式交付；如果想先補 Figma 基礎，可看Figma 中文完整教學。

網格不是裝飾，是設計與開發之間的契約

很多人把 Layout Grid 想成「背景上那些灰色的直線」，打開來看一下、對齊完就關掉。這個理解只對了一半。格線真正的價值，是它讓畫面上每一個元素都有一個可以被描述、被複誦、被寫成程式的位置。設計師說「這個卡片佔 4 欄、從第 2 欄開始」，工程師聽到這句話，就能直接對應到 CSS Grid 的 grid-column: 2 / span 4。這就是契約：設計端和開發端用同一套語言講話，中間沒有翻譯損耗。

換個比喻會更清楚。想像你要蓋一棟大樓，結構技師會先畫好鋼筋的格距：每一根柱子之間固定 7.2 公尺、每一層樓高 3 公尺。建築師、水電、室內設計全部在這個骨架上發揮，沒有人會在已經澆好的混凝土裡臨時決定「這根柱子我往左挪 30 公分好了」。網頁排版也是同一回事。格線就是那套鋼筋格距，它決定了畫面的節奏、留白的呼吸、元素之間的關係。沒有格線的設計，像用口香糖黏起來的模型，桌上看起來沒事，一搬上卡車就散了。

也因此，我會建議你，把格線當成檔案的第一個步驟，別把它留到最後才當裝飾補上。開一個新的 Frame，第一件事應該是先決定這個 Frame 的格線結構，放圖、寫標題都還在後面。這個習慣一旦養成，你後面所有元素都會自動在一個有秩序的系統裡生長，不會各自為政。關於更寬廣的版面觀念，網頁版面設計完全攻略把整體的 RWD 排版脈絡整理得很完整，可以搭配著看。

設計稿為什麼常常「落地就跑位」

常見的交付問題是：設計師在 1440px 寬的畫布上，把元素用絕對位置擺得整整齊齊，工程師一拉視窗大小，元素卻擠成一團或留下一大片空白。問題不在工程師，而是設計稿從一開始就沒有定義「當容器變小，這些元素該怎麼流動」。

Layout Guide 是視覺參考，Constraints 則描述子元素和父 Frame 邊界的關係；兩者都不會自動把「佔六欄」轉成響應式規則。設計師仍要在各斷點 Frame 定義版面，並把欄位、容器與元件行為寫進交付規格。這和CSS Box Model裡的空間分配觀念可以互相對照。

三種 Layout Guide 類型各自的戰場

根據 官方文件（2026），Figma 的 Layout Guide 有三種類型：Uniform grid（均勻格線）、Column（欄）與 Row（列）。Figma 沒有獨立的 Baseline guide 類型；需要基準線節奏時，可用 Row 或 Uniform grid 模擬並在排版規格中註明。

網頁版面通常以 Column 為主，Row 可輔助垂直節奏，Uniform grid 適合圖示與固定間距。若要做文字基準線，可疊一組 Row，將高度或間距設成內文行高或其公因數；這是模擬方法，不是 Figma 的獨立 Baseline 功能。排版觀念可延伸閱讀排版設計實戰技巧。

Column 網格：你的水平骨架

Column 網格的設定面板裡有四個關鍵欄位：Count（欄數）、Type（固定寬還是固定數）、Gutter（欄與欄之間的間距）、Offset（整組網格往右偏移多少）。Margin 那個欄位只有在 Type 選 Stretch（伸縮）時才會出現，它控制的是畫面左右兩側的留白。這幾個參數的組合，決定了你的格線長什麼樣子。

Column 與 Row 可使用 Stretch、Left、Center、Right 等對齊方式。Stretch 會讓欄寬隨 Frame 變動；其他方式則使用固定欄寬並決定整組 guide 的對齊位置。響應式主內容常從 Stretch 開始，但有最大寬度的容器也可能用固定欄寬；選擇要和實際 CSS 容器規則一致。

Row 與模擬基準線：被低估的垂直秩序

Row 網格在一般的行銷頁用得不多，但在資訊密度高的後台、儀表板、或是像Bento Grid那種等高卡片拼貼的版面裡，它非常有用。設定的時候，我通常會讓 Row height 跟我設計系統裡的 spacing token（間距單位）成倍數關係。例如我的基礎間距是 8px，那 Row height 就會設成 8 的倍數，例如 16、24、32。這樣一來，垂直方向的每個區塊都會落在格點上，不會出現 27px、43px 這種零碎的數字。

如果要模擬文字基準線，可新增 Row guide，將固定高度或間距設為內文行高或其公因數。例如內文行高 24px，可用 24px 的列節奏檢查多欄段落是否對齊。這仍是視覺檢查工具，不會自動吸附文字 baseline，也不能取代文字樣式中的行高設定。

12 欄的秘密，與什麼時候你該打破它

講到 Column 網格，幾乎所有人都會說「用 12 欄」。這個建議本身沒錯，但很少人解釋為什麼偏偏是 12，8、10、16 難道不行嗎？答案跟數學有關：12 可以被 2、3、4、6 整除。這代表同一套 12 欄格線，你可以切出兩等分（各 6 欄）、三等分（各 4 欄）、四等分（各 3 欄）、六等分（各 2 欄），全部都整齊落點，沒有餘數。這是 12 這個數字的天生優勢，也是它成為業界預設的原因。

但這不代表你永遠只能用 12。底下我把幾種常見的欄數選擇整理出來：

從這張表你可以看出一個原則：欄數越多，對齊顆粒越細，但每欄越窄、Gutter 的相對佔比越高。手機版我會傾向用 4 到 6 欄，因為螢幕寬度有限，欄數一多，每欄就窄到塞不下任何東西，Gutter 反而吃掉空間。桌機版用 12 欄是因為寬度夠，可以享受細顆粒帶來的彈性。所以一個真正完整的響應式設計，通常不會從頭到尾都用同一套欄數，而是 Desktop 12 欄、Tablet 8 欄、Mobile 4 欄這樣遞減。這個觀念我會在後面的響應式章節再展開。

什麼時候該果斷打破對稱

格線是工具，不是宗教。有些時候刻意讓元素脫格、跨格、甚至只佔半欄，反而能創造視覺張力。最典型的例子是英雄區（Hero Section）的主視覺：很多設計師會讓一張大圖從邊界一路延伸、故意超出格線的 Margin，營造滿版的氣勢。這不是犯規，這是設計判斷。格線的用途是給你一個預設的秩序，當你有明確的理由要偏離，就大膽偏離。怕的從來不是打破規則這件事，真正危險的是連規則在哪裡都沒搞清楚就隨手亂排。先有系統，才談得上例外。

從零設定一組實戰格線的取捨

觀念講完了，接下來是動手。我帶你走一遍我自己在 Figma 裡設定桌機版格線的完整流程，每一步都會說清楚那個數字背後的取捨，避免只丟給你一組「照抄就好」的參數。因為照抄的參數沒辦法讓你學會判斷，換一個專案你就又不會了。

1. 先決定最大內容寬度。我會先把 Frame 設成 1440px 寬，這是目前桌機設計最常見的基準。但 1440 不是內容的寬度，它是整個視窗的寬度。真正的內容區，我通常會限制在 1200px 左右，這個數字是考量到多數螢幕在縮放後仍然能完整顯示主內容，不會撐得太滿。
2. 決定左右 Margin。Margin 就是內容區兩側的留白。桌機版我習慣留 120px 左右，這樣在 1440px 的視窗裡，內容區實際落在 1200px。這個留白不是隨便給的，它要讓畫面有呼吸感，同時在手機縮放時不會消失。
3. 選擇欄數與 Type。桌機版選 12 欄、Type 選 Stretch。Stretch 的意思是欄寬會隨容器伸縮，但欄數、Gutter、Margin 保持固定。這正是響應式要的行為。
4. 設定 Gutter。Gutter 我通常設 24px 或 32px。24 是比較緊湊的選擇，適合資訊密度高的版面；32 比較寬鬆，適合內容導向、強調留白的頁面。這個數字會跟你的排版風格直接綁定，要想清楚。
5. 檢查欄寬是否合理。設定完之後，Figma 會自動算出每一欄的寬度。以 1200px 內容區、12 欄、24px Gutter 來算，Gutter 總共佔 11 格 × 24 = 264px，剩下 936px 分給 12 欄，每欄約 78px。這個寬度要能塞下你最小的卡片元件，如果塞不下，就要回頭調整欄數或 Gutter。

格線不是設一次就用到底。同一個專案可以為不同斷點建立不同 Frame，每個 Frame 套用自己的 Layout Guide。Figma 可在同一 Frame 疊加多組 guide，但不會依斷點條件自動切換；手機、平板與桌機仍應分別定義。

Margin 與 Gutter 的微妙平衡

Margin 和 Gutter 是格線裡最容易被混淆的兩個概念。簡單區分：Margin 是內容區跟視窗邊緣之間的留白，Gutter 是欄與欄之間的縫隙。視覺上它們都是「空白」，但功能完全不同。Margin 的任務是把內容從螢幕邊緣推開，給眼睛留呼吸空間；Gutter 的任務是分隔欄位，讓相鄰的內容不會黏在一起。

這兩者的比例會影響整個畫面的氣質。Gutter 跟 Margin 差不多大，畫面會顯得工整、理性，適合企業網站、後台；Gutter 明顯小於 Margin，欄與欄會感覺比較緊密，內容會有一種「群組感」，適合卡片式內容、電商商品列表。這不是教科書會告訴你的事，但你在調整這兩個數字的時候，慢慢會摸出這個手感。我的建議是，設定完之後務必在畫面上放幾個真實元件，用眼睛去感受那個節奏，不要只看數字。

格線的快捷操作與檢視設定

在 Figma 裡，選好一個 Frame 後，可從右側面板的 Layout Guide 區塊新增 guide。介面名稱與快捷搜尋字可能隨版本調整，因此找不到舊稱「Add Layout Grid」時，直接在快速選單搜尋「layout guide」。一個 Frame 可以疊加多組 guide，例如同時使用 Column 與模擬基準線的 Row，並以不同顏色區分。

當你想專注看內容時，可在右側面板切換 Layout Guide 的顯示與隱藏。每組 guide 都能調整顏色與透明度；Column 與用來模擬基準線的 Row 可使用不同顏色，避免混淆。

拖曳時可利用 Figma 的對齊提示與吸附行為，但快捷鍵可能因作業系統、鍵盤配置與版本不同而變動。需要暫時脫離吸附時，請以目前 Figma 選單與快捷鍵說明為準，不要把單一組合鍵寫成通用規則。

底下這張表把常用的格線操作整理出來，建議你印出來貼在螢幕旁邊，前兩週強迫自己用快速鍵，很快就能內化成肌肉記憶。

Constraints 與 Layout Grid 聯手，才是真響應式

到這裡為止，我們講的都是格線本身。但格線要發揮響應式的威力，一定要跟另一個 Figma 概念綁在一起：Constraints。很多人以為開了格線就等於做了響應式，這是最大的誤解。格線只是畫面上的參考線，它不會自動讓你的元素跟著縮放。真正讓元素「知道」自己要在容器變動時怎麼反應的，是 Constraints。

Constraints 定義子元素和父 Frame 邊界的關係，例如 Left、Right、Center、Left & Right 與 Scale，垂直方向另有 Top、Bottom 等選項。它只參考父 Frame，不會讀取 Layout Guide 的欄線，也不會自動產生 CSS Grid 規則。

五種 Constraints 行為的實戰對照

Layout Guide 告訴你卡片在目前 Frame 中該對齊哪些欄，Constraints 或 Auto Layout 則描述它如何跟父容器一起變動。兩者可以搭配，但 Left & Right 只會維持和父 Frame 左右邊界的距離，不會「守住某幾欄」。完整響應式設計仍需要不同斷點 Frame、內容壓力測試與工程規格。

如果你想更系統性地理解響應式的整體流程，Figma 響應式設計教學把外掛輔助一鍵預覽行動版的方法整理得很實用，可以當作這一節的延伸。而響應式設計背後更根本的觀念，在響應式網頁設計 RWD這篇有完整的鋪陳。

手機優先是動詞，不是形容詞

根據 Statista（2026 年 4 月），全球行動裝置網頁流量長期過半。Google 的行動優先索引則是主要使用手機版內容建立索引，不是給手機版獨立的排名加分（見 2023 年 10 月的 官方說明〈Mobile-first indexing is here〉）。是否採手機優先流程，仍應結合自身流量與產品情境。

若行動裝置是主要情境，先畫桌機再硬縮到手機，容易漏掉內容優先順序與觸控操作。手機優先是一種設計流程，不是 Google 的排名規則。

把格線拆成三層：Desktop、Tablet、Mobile

在 Figma 裡落實手機優先，最乾淨的做法是建立三組斷點的 Frame，每組都設定專屬的 Layout Grid。底下是我常用的斷點與格線對照：

這張表的重點在那個遞減的邏輯，那幾個數字只是範例：寬度越小，欄數越少、Margin 越小、Gutter 越小。因為手機螢幕的空間極度有限，你要把每一像素都用在刀口上，沒有本錢像桌機那樣揮霍留白。4 欄在手機上已經是很細的顆粒，再細下去每欄就窄到沒有意義。

實際的設計流程，我會建議你從 Mobile 的 Frame 開始畫。把最小的螢幕先照顧好，把最受限的排版先解決，然後再往 Tablet、Desktop 放大。這個順序的好處是，你會被迫優先思考「什麼是這個頁面最核心的內容」，因為手機版根本沒有空間放次要的東西。等你把核心確定下來，放到桌機上時，你只是在那個核心之外加上更多留白和輔助元素而已，不會本末倒置。這個流程上的反轉，是手機優先真正的精髓，遠勝於在文件裡寫一句「我們支援 RWD」的口號。

從 Figma 落地到 CSS Grid 與 Tailwind：格線的交付語言

前面一再強調，格線是設計與開發的契約。這一節我要把這個契約的「交付語言」講清楚，也就是你在 Figma 裡設定的格線，實際落地到網頁時會變成什麼樣的程式碼。這一塊是很多設計師跟工程師之間摩擦的根源：設計師覺得「我都畫好了啊」，工程師覺得「你畫的我寫不出來」。問題往往跟任何一方的能力無關，真正的關鍵在於兩邊用的詞彙對不起來。

你在 Figma 裡設定的 12 欄格線，到了網頁前端，最直接的對應就是 CSS Grid。CSS Grid 是 W3C 制定的二維排版規範，它原生就支援欄、列、間距的概念，幾乎可以一一對應你在 Figma 裡的設定（見 MDN Web Docs 的 CSS Grid Layout 文件）。舉例來說，你在 Figma 設定 12 欄、24px Gutter，到了 CSS 就是：

.container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}

這四行程式碼，就是你在 Figma 裡那組 12 欄格線的等價表達。1fr 是 fractional unit（分數單位），它讓每一欄佔據等分的空間，這對應的就是你在 Figma 裡選 Stretch Type 的行為。如果某個卡片你要讓它佔 4 欄，CSS 就是 grid-column: span 4。這就是為什麼我一直強調格線是契約：設計端的「佔 4 欄」和開發端的 span 4 是同一句話的兩種語言。

用 Tailwind 寫格線，直覺更快

如果專案使用 Tailwind CSS，grid grid-cols-12 gap-6 可建立 12 欄與既定 spacing scale 的間距（見 Tailwind CSS 官方文件的 Grid Template Columns）。在預設 spacing scale 中 gap-6 通常是 1.5rem，但專案可自訂，因此交付時應寫明實際 token 值。元素佔 4 欄則可用 col-span-4。

因此，我會建議設計師至少要看得懂這兩種寫法。你不需要會從零刻出一個網站，但當工程師跟你說「這個我用 grid-cols-12 切，你的卡片我給它 col-span-4，可是 Gutter 我用了 16px 不是 24px，因為那個斷點太窄了」，你要能聽懂、能判斷這個調整合不合理。否則整個交付過程你就只能盲目點頭，沒辦法為自己的設計把關。想把基礎補起來的話，CSS 入門全攻略是很好的起點；更進階的排版工程實務，則可以參考Sass/SCSS的變數與 mixin 怎麼把格線參數化。

把格線做成團隊共用的設計 token

可以把每個斷點的欄數、Gutter、Margin 與模擬基準線間距整理成設計 token。Figma 的 Number Variables 目前可綁定 Layout Guide 的 grid size、row／column count、寬高、margin、offset 與 gutter（見 Figma 官方對 variables 與 modes 的說明，2026）。使用 modes 管理不同裝置值時，仍要確認各 Frame 套用正確模式。

開發端也能直接吃這份 token。不論你們用的是 CSS 變數、SCSS 的 map、還是 Tailwind 的 config 檔，只要設計 token 的命名和數值跟 Figma 對得起來，工程師就能把格線參數寫進程式碼的基礎層，所有元件自動遵守同一套節奏。這一層一旦搭起來，設計和開發之間最常見的那種「你那邊看起來不一樣」的爭執會大幅減少，因為兩邊在用同一組數字、同一套語言。格線從這一刻起，才真正變成我開頭說的那份契約。

格線不直接改善 SEO：真正相關的是實作規格

Layout Guide 本身不會影響搜尋引擎，也不會防止版面位移。設計端能做的，是把媒體比例、動態內容保留區與斷點行為標清楚，讓工程端有依據預留空間。

CLS（Cumulative Layout Shift，累積版面配置位移）衡量頁面生命週期中非預期的版面位移。Core Web Vitals 是眾多排名訊號中幅度較小的一項，主要仍應從使用者體驗角度處理。完整邏輯可參考Core Web Vitals 完全攻略。

格線只能提供欄位參考；真正預防 CLS 的是圖片尺寸屬性、aspect-ratio、字型策略、廣告與動態內容預留空間，以及不在既有內容上方插入未預留元素。設計稿有清楚規格會方便工程實作，但不能把格線本身當成防線。

三個設計端就能預防 CLS 的動作

底下這三件事，是設計師在 Figma 階段就能做、而且會直接減少上線後 CLS 問題的：

• 給所有圖片和媒體指定比例。在設計稿裡，圖片要有明確的長寬比，例如 16:9、4:3。這樣工程師就能在 CSS 裡用 aspect-ratio 預留空間，圖片載入前那塊區域就已經有正確的高度，不會等到圖片下載完才把下面的內容往下推。這是 CLS 最常見的元兇，也是最好預防的。
• 定義廣告與動態內容的保留區。如果你的頁面會插入廣告、或是載入後才出現的動態區塊，在設計階段就要把這些區塊的尺寸和位置標示清楚，讓工程師預留固定高度的容器。否則廣告一載入，整段內容瞬間往下跳，CLS 直接爆表。
• 格線的欄寬要能對應到實際的 CSS 單位。避免在設計稿裡出現那種「這個卡片寬 273px」的零碎數字，因為它很難對應到響應式的格線系統。盡量讓元素寬度都是欄寬的整數倍，這樣工程師用 CSS Grid 或 Tailwind 切版時，元素會落在格點上，載入過程才不會出現「先隨便排、再跳到定位」的位移。

這三個動作能降低工程端猜測，實際成效仍要在上線後用真實使用者資料驗證。不要把設計秩序直接等同 SEO 成績。

五個常見的格線錯誤，與我會怎麼修正

這一節把實務上最常見的五個格線錯誤列成下表，每一個都附上我會用的修正方式。這些錯誤不是新手的專利，我看過不少做了好幾年的設計師也會犯，因為它們往往不是技術問題，而是習慣問題。

這五個修正都不需要額外學新功能，它們只是要求你把格線當成一個需要被刻意設計的系統，而非那種打開就好用的裝飾。差別就在這個心態上。當你開始認真對待格線，你的設計稿會有一種很難言喻的「穩」，那種穩就是專業和業餘的分水嶺。如果你還在累積整體的 UI/UX 實力，UI Prototype 原型設計跟免費 UIUX 自學資源這兩篇可以幫你把視野拉寬，看到格線在整個設計流程裡的位置。

動手把格線變成你的習慣

觀念懂了、設定會了，接下來就是把它變成你自己的東西。我給你一個可以馬上執行的四步行動方案：

1. 挑一個你正在做的專案，重新檢視它的格線。打開主要的 Desktop Frame，看看它有沒有格線、欄數多少、Gutter 和 Margin 是不是你刻意的選擇。如果不是，用我這篇給的流程重新設一組。
2. 為這個專案補上 Tablet 和 Mobile 兩組 Frame。用我上面的斷點對照表，把欄數、Margin、Gutter 都設好。這一步你會立刻看到自己原本的設計在手機上會變成什麼樣子，很多問題會自動浮現。
3. 檢查所有元素的 Constraints。逐一點選畫面上的主要元素，確認它的 Constraints 是不是符合它的職責。滿寬的該設 Left&Right、置中的該設 Center，不要全部留在 Left。
4. 把格線參數寫進設計系統文件。欄數、Gutter、Margin、斷點與垂直節奏都要明確記錄，讓設計與工程共用同一份規格。

這四步做完，你的設計稿會從「一張好看的圖」變成「一份能被工程師信任、能在不同螢幕上站得穩的規格」。格線的價值，從來不是讓畫面變漂亮而已，它讓你的設計有骨架、有秩序、有可以被交付和複製的結構。當你把這套骨架建立起來，後續不論是交給前端、做原型互動、還是後續優化 SEO 和 Core Web Vitals，你都站在一個穩固的基礎上。

換句話說，格線是一種紀律，也是一種讓你被信任的方式。一份連格線都沒有的設計稿，工程師拿到手裡只能用猜的，猜錯了來回修改，耗掉的是整個團隊的時間；一份格線清楚、Constraints 明確、斷點齊全的設計稿，工程師拿到手裡幾乎可以直接動工，中間的溝通成本降到最低。這中間的差距，往往不是天分的問題，而是你有沒有把那組格線當一回事。把格線學透，你交付出去的就不只是畫面，而是一份專業的承諾。這也是我反覆強調的重點：把格線當成設計流程裡第一個要決定的基礎建設，別留到最後才補上當裝飾。

如果你在規劃網站時，想從更源頭的設計思考方法看起，設計思考指南能幫你把使用者需求跟版面決策串起來。而若你正在煩惱設計完之後要用什麼工具把網站真的架出來，WordPress 頁面編輯器評測會是下一步很實用的參考。格線是起點，不是終點，把它學透，你後面的每一個設計決策都會更有底氣。