Figma grid 排版正式上線：拖一下軌道、刪一格自動補位，二維版面不再手刻

Auto layout 解決了單軸排列：一排按鈕、一列卡片、一個由上往下長的表單，沿著一條軸線自己對齊、自己撐開。但版面只要同時往橫和直兩個方向長，老方法就回來了——開一個 frame 裝橫排，裡面再塞 frame 裝直排，巢狀兩三層，改一個間距得鑽進去三層才找得到。

這次 Figma 把 grid auto layout 正式推上 generally available，並且補了三個讓它從「能用」變「順手」的自動行為。對每天在畫布上排版的人來說，這是預設工作方式的改變，值得花十分鐘換個習慣。

grid 跟 auto layout 差在哪

把它放回前端的詞彙會最快理解。Auto layout 對應的是 flexbox——東西沿一條主軸排，你控制間距、對齊、要不要換行。Grid 對應的是 CSS Grid——你先定義整個容器有幾欄（columns）幾列（rows），每條軌道（track）可以是固定寬度，也可以用 fr 這種比例單位，內容物再落進一格一格的位置裡。

差別在思考的起點。Auto layout 你想的是「這些東西怎麼一個接一個排」；grid 你想的是「這個版面的骨架是幾乘幾」。dashboard 的數據卡、相片牆、產品列表、bento 區塊，這些東西的本質就是一張表格的骨架，用 grid 描述它們比用巢狀 auto layout 自然得多。

這次 GA 補的三個自動行為

grid 本身早就在了，beta 階段就能用。真正讓它在實戰裡好用的，是這次一起上線的三個「畫布自己算」的行為。

第一個是拖曳重排欄與列。直接抓住一條欄軌道或列軌道，拖到新位置，整欄（或整列）的內容跟著一起搬。以前要重新排序，得一格一格手動搬 item，現在是拖一下軌道的事。

第二個是自動補位。刪掉某一格的內容，後面的 item 會自動往前遞補，把空洞填掉，不會留下一個尷尬的空格等你手動收。

第三個是自動增減列。往 grid 裡加內容，需要的時候自動長出新的一列；刪到一列空了，那一列自動收掉。列數跟著內容走，不用你預先算好或事後清理。

fr 單位，讓 Figma 越來越像在寫 CSS Grid

grid 軌道可以用固定像素，也可以用 fr（fractional，比例單位）。1fr 1fr 1fr 是把可用空間切成三等分；2fr 1fr 是左邊佔三分之二、右邊佔三分之一。容器變寬變窄，軌道按比例自己縮放，不用你寫死寬度。

熟悉前端的人會發現這就是 grid-template-columns 那套心智模型，一字不差地搬進了畫布。這帶來一個常被低估的好處：你在 Figma 裡定義的軌道結構，跟工程師最後在 CSS 裡寫的幾乎一一對應。設計稿不再只是「長得像」最終成品，而是用同一套骨架描述它。

換成 grid 之後，日常會少掉什麼

最直接的是巢狀消失。一個天生二維的版面，過去是「外層 frame 管直排、內層 frame 管橫排」，現在一個 grid 容器搞定，圖層面板乾淨一截。

維護成本也跟著降。欄數、列數、間距全集中在同一個面板，改版時不用鑽進三層 frame 找那個藏在裡面的 gap。要把三欄改成四欄、要調整某一欄的比例，都是面板上一個數字的事。

交付環節同樣受惠。當你的軌道結構跟前端 grid 對得上，跟工程師對版面的對話就從「這裡大概留多少」變成「這是三欄 grid，中間欄 2fr」。具體、可執行、不用來回猜。

下次開一個新版面前，先問自己一句：這是一排東西，還是一張表？答案是表，就從 grid 開始。