Figma Design 教材 / Class LLL

格線：什麼需要列欄與跨格一起決定？

先定二維軌道，再分配儲存格與內容

卡片跨兩欄時，不只看下一項放不放得下。改列欄、數量、欄軌fr與A跨格，區分自動列數、儲存格內對齊、二維格線與換行／參考格線。

撰寫與維護：Class LLL · Lab Light Label｜預估閱讀 14 分鐘

開啟互動教材查看參考來源

閱讀目標

依二維對齊需求選格線而非換行或參考格線
分開列數自動與軌道依內容調整／填滿責任
以fr比率說明剩餘空間分配
辨認跨格填滿條件、定位及刪除方式差異

適用條件與學習範圍

卡片要跨兩欄，為何只開換行不夠？列欄數量、軌尺寸與項目填滿如何一起限制結果？

先讀固定尺寸／依內容調整／填滿，分清父框、軌道與子層的尺寸責任；需要比較流動排版時可補讀換行。

能以二維列欄、儲存格與跨格解釋格線，辨認自動列數、fr、定位與軌刪除的作用對象，遇到不適用內容時選換行或其他方法。

教具只示範自動定位、固定父框／列高、固定尺寸或fr欄、A有限跨格與儲存格內對齊；完整原生控制在正文交代，不模擬依內容調整／最小值／最大值、手動定位、軌重排／刪除或CSS Grid引擎。

原理與判斷

換行會隨每行可用空間重新分組；若不同列必須共享欄界，或一張卡片要佔兩欄兩列，應先建立二維軌道。格線以列欄交叉成儲存格，再由子層佔用單格或跨格。 2026-10-22官方格線專文列所有方案、可編輯；它是自動排版的第三種流程，不是需要套用的視覺排版參考線，也不能因名稱相同就假設等於CSS Grid全部語法。

列欄決定儲存格，內容決定自動需要多少列

選自動排版框架的格線流程，以格線 picker設定數值 of columns與數值 of rows。Row是橫向列，Column是直向欄；本台用r／c標記每項起始儲存格，避免中文列欄混用。預設3欄、4項，A–C第一列、D第二列；改2欄便是AB／CD。原生數值 of rows預設自動，隨內容增加或移除所需列，空列自動刪除。這個自動是「列的數量」，不是列高自動填滿父框。本台父框288×224始終固定尺寸、列高48始終固定尺寸，只有列數跟內容變；切固定尺寸列數後可保留多餘空列。本站只讓固定尺寸容量足夠的組合可選，是有限模型防護，不宣稱原生同樣停用控制。

先看尺寸責任，再算fr分配

原生框架、tracks與nested objects可用各自適用的固定尺寸、依內容調整或填滿；頂層框架不能填滿。選上方／左側藍色軌道標籤可從下拉或數值欄改尺寸，拖動軌道邊緣會把該軌道轉固定尺寸。依內容調整、最小值／最大值限制與父子互動應回尺寸責任頁，不假設所有組合都能任意並存。填滿軌道的fr是相對份額。本台父寬288扣左右各12與兩段欄間距12，剩240；三條1fr得80、80、80，首欄2fr則120、60、60。fr分的是扣間距後的剩餘寬，不能拿整個288直接乘比例。固定尺寸欄64則不填滿剩餘區域；欄數變多或固定欄太寬仍可超出父框，裁掉內容不是排版已修好。

跨格先查子層填滿，橋板不是兩個物件

原生物件需填滿容器才可跨格，可拖調吸附或設定Column 跨格、Row 跨格。A從1×1改2欄×1列，仍是一個子層，寬包含兩欄及中間間距；本台首欄2fr時為120＋12＋60＝192。再跨2列會增加佔用儲存格，後續項目需找到其他位置，自動可能增加列。本台只讓A跨1–2列／欄、其他項目1×1；保留順序找第一塊可用矩形，是原創小模型的可算約定，不宣稱逐像素重現原生重排。切「項目固定尺寸24」是本站先清跨格、再縮成24×24的比較動作，不將此操作包裝成Figma自動切換保證。填滿已填滿儲存格時，改儲存格內對齊往往看不出移動；小於儲存格的固定尺寸項目更容易觀察。

自動定位填空，手動空格需要另外的條件

原生格線預設automatic positioning，新增、移動或複製內容會由左至右、上至下安置並調整同層項目；可切Toggle automatic positioning保留空儲存格與手動位置。重新開自動定位也會把數值 of rows設回自動。不要一邊要求自動補洞、一邊期待手留空格永久保留。選儲存格中的物件可在位置調整對齊，官方列left、horizontal center、right、top與vertical center等；本台僅比較起端與雙軸中央。Column 間距、Row 間距分別管軌之間，內距管外邊；跨格物件會橋過中間間距，並非把間距當另一個空儲存格。需要個別四邊內距可在原生展開，本台四邊都固定12。

減少軌數與刪軌，會對內容做不同事

原生可用grabber重排tracks；跨多軌道的物件會隨相關tracks一起移動。直接選軌道標籤按刪除／Backspace會刪該軌道及內容；跨軌物件則縮小或移到最近可用儲存格。先保留母稿，確認選的是軌道還是子層，不能把刪軌當成無損減少欄數。相反地，從格線 picker降低列／欄數會保留物件並移到附近儲存格，同層項目配合重排。兩者入口與結果不同。本台只提供欄數及有限內容增減，未模擬原生刪軌／最近儲存格重排／軌道拖曳；若需要這些行為，依官方步驟回原生檔操作，不用本站停用選項推論原生限制。

格線、換行、參考格線與CSS要各自驗證

多列卡片需要共同欄界或跨格時選格線；標籤按可用空間自然換行可選換行。排版參考線與uniform grid是視覺參考，並不替子層建立自動排版定位與尺寸責任。若介面尚未出現預期流程，先核對Figma Design、編輯權限與當前版本，不以畫參考格線冒充格線。需交付瀏覽器時，另依內容語義、響應式尺寸與目標CSS行為驗證；Figma 格線不等於完整CSS Grid演算法。原生回測窄框、更多卡片、長文字、空格與跨格，確認可讀內容沒有被隱藏。本站只證明明示幾何模型的內部一致，沒有原生軟體或真人學習成效證據。

步驟與觀察

保留來源並辨認二維需求
在可編輯的Figma Design檔保留卡片母稿，列出哪些欄界要跨列共用、哪一項需跨格；若只是自然換行先比較換行。操作名稱對照（中文為本站教學譯名）：選框架 > 自動排版 > 格線流程（介面原文：選Frame > Auto layout > Grid flow）格線 picker > 數值 of columns／數值 of rows（介面原文：Grid picker > Number of columns／Number of rows）選子層 > 排版 > Column 跨格／Row 跨格（介面原文：選child > Layout > Column span／Row span）選軌道藍色標籤 > Track sizing（介面原文：選track藍色標籤 > Track sizing）
設格線及列欄數量
選框架的自動排版 > 格線流程，開格線 picker設數值 of columns；先保留數值 of rows 自動，增減子層確認所需列及空列如何改變。
核對框架／軌道／子層尺寸
分別選父框、藍色軌道標籤與子層，檢查固定尺寸／依內容調整／填滿及最小值／最大值；頂層框架不能填滿。調軌道下拉或數值欄，手拖改固定尺寸前先記原值。
分開調間距、內距與儲存格對齊
以Column 間距、Row 間距與內距分開比較，選儲存格物件在位置觀察可用對齊；小固定尺寸項目和填滿儲存格的填滿項目對齊效果不同。
設跨格並核對定位模式
確認子層填滿容器，再設Column 跨格／Row 跨格或拖到吸附。核對automatic positioning：想保留手動空儲存格先關閉，重開會恢復自動及自動列數。
用母稿比較重排與刪除後回到目標尺寸
在副本比較格線 picker減軌與軌道標籤刪除，前者保留重排、後者刪內容；跨軌結果另查。用窄框、多內容及輸出目標驗證，記錄網站模型未含的規則。

常見問題

跨格控制沒有預期效果

先查子層是否填滿容器、作用軸及Column 跨格／Row 跨格，不把固定尺寸寬拖大當成已跨格。本站固定尺寸24比較會明示先清跨格。

列數自動卻沒有填滿父框高度

自動管需要幾列，不是每列高；檢查列軌道尺寸、父框高度及依內容調整／填滿責任。

fr加起來後還是算不對

先扣內距和軌間間距，再按fr總份額分配；固定軌與最小值／最大值另算，不能直接除父框總寬。

想保留的空格被自動補上

檢查Toggle automatic positioning；自動定位會安排內容，重開也設列數自動。手動空格需求另存副本測試。

減少欄時內容不見了

辨認是格線 picker降低數量，還是選軌道按刪除；官方後者會刪內容。保留母稿再測，不用復原以外的假設保證可恢復。

只有參考格線，卡片並未一起排好

排版參考線不會建立格線流程；核對自動排版框架、列欄及子層，不以uniform grid畫面當排版已成立。

適用範圍與證據

原教材查核日期：2026-10-22 適用範圍：Figma Design；格線官方專文列所有方案、可編輯，未將格線全體標測試版。介面語言／桌面與瀏覽器入口依當前環境；頂層框架不可填滿，跨格有子層填滿條件。來源狀態：2026-10-22依robots單線Scrapling --ai-targeted新抓grid正文並讀相關主體；Guide S04為21日保存來源，日期分開，不稱全部新抓。示意限制：原創固定父框、固定列高、固定尺寸或fr欄軌與A有限跨格；24px項目只幾何估算，不量字。自動順序first-fit為本站有限約定，固定尺寸容量guard非原生不可用判定；無依內容調整／最小值／最大值／手動定位／刪軌或CSS Grid引擎。素材原創。原生軟體實測：未原生Figma實測；官方來源與本站公開瀏覽器驗證分開。學習成效驗證：未真人試用，無學習或遷移成效證據。

參考來源

來源依原教材逐頁維護；本次建立閱讀網址不代表重新完成原生軟體或真人學習測試。如遇版本差異或內容錯誤，歡迎來信提出具體段落與版本。