CSS Grid 會將項目依序放入宣告的儲存格中,由左至右排列,當前一行填滿後再換到下一行,這就是為什麼 grid-template-columns 宣告會決定內容何時會溢出一行。當你將容器設為 display: grid 並定義明確的欄位模板時,瀏覽器會依來源順序將每個子元素填入下一個可用的儲存格,只有在沒有更多欄位時才會換到新的一行。這種排列方式是該版面模式的預設換行行為;它並非像 Flexbox 中 flex-wrap 那樣是一個名為 wrap 的屬性。你所撰寫的軌道宣告——包含欄數、每欄寬度,以及欄與欄之間的間距——會直接決定子元素是能容納於同一行、分散在多行,或是超出可見容器的範圍。CSS Grid Generator 會產生一個已驗證的 .grid 規則,包含宣告的欄、列、間距與項目對齊方式,讓換行行為從該規則進入樣式表的那一刻起就能如預期運作。
在 CSS Grid 語境中換行的意義
CSS Grid 是一個二維的版面模型。它所執行的換行是逐行進行儲存格指派,而不是 Flexbox 透過 flex-wrap 所提供的單軸線性換行。一旦你宣告 grid-template-columns 為三個軌道,引擎就會將前三個子元素放在第一列,接下來的三個放在第二列,依此類推。你並不是在要求 grid 換行;換行是擁有有限欄數軌道後自然產生的結果。換行會自動發生,但前提是各軌道大小維持相等。一旦某個軌道成長超出其應有比例,可見的 grid 就會停止表現得如同等寬軌道換行,並開始產生溢出的欄位。
有兩種情況經常被誤認為「grid 沒有換行」。第一種,當軌道因為其 min-content 的貢獻而被撐得比宣告的 fr 空間還寬時,就會發生內容溢位。儲存格中的一個長網址、無法斷行的單字,或尺寸過大的圖片,都可能撐大該軌道,迫使版面引擎把相鄰元素擠出版面,或在欄位數用盡之前提前換行。第二種,當 grid-auto-rows 未被宣告,而且引擎自動建立的隱含列沒有定義高度時,新的一行可能隱藏在容器內部,或被擠到可見視窗下方。這兩種情況都可以透過讓軌道明確、相等且有界來解決,這也是 CSS Grid Generator 套用於每個輸出規則的契約。
一個實用的換行測試很簡單:挑選一個比宣告欄數更多的子元素數量。三欄加上七個項目,應該會在第一列放三個、第二列放三個、第三列放一個。如果第七個子元素在視覺上與第三列重疊,或跑出容器之外,代表各軌道其實並不相等——軌道中有長字或寬圖片迫使軌道變大,而你的換行正被 min-content 的尺寸計算所破壞。解法就是產生器所使用的 minmax(0, 1fr) 形式,因為最低值為零,讓每個軌道無論內容為何都能縮回原本大小。
使用產生器建立明確的換行 Grid
CSS Grid Generator 為驅動逐行換行的精確宣告提供了一個有界線的建構工具。打開工具,你會看到三個數字輸入欄、兩個對齊下拉選單、一個即時預覽區,以及一個產生的 CSS 區塊。按照順序操作各個控制項,就能產出第一次貼進樣式表就能正確換行的規則。
- 在欄位欄位中輸入 1 到 12 之間的整數欄數。這是每列的儲存格數,也是決定何時換到新一行的觸發條件。
- 在列數欄位中輸入 1 到 12 之間的整數列數。這會設定預覽與產生的規則一開始預留的列數;列數填滿後多出的列仍然會出現,因為引擎會建立隱含軌道,但宣告的軌道能讓換行擁有明確的形狀。
- 在間距欄位中輸入 0 到 100 之間的像素值。這個數值會透過簡寫屬性 gap 同時套用至 row-gap 與 column-gap,這在 MDN 文件中有記載,指出它會在兩個軸上套用相同的間距。
- 從 stretch、start、center 或 end 中挑選一個 justify-items 值。這會設定每個 grid 項目在其儲存格內沿行內軸的對齊方式。
- 從相同的四個選項中挑選一個 align-items 值。這會設定沿區塊軸對應的預設對齊方式。
- 編輯時留意即時預覽。當每個欄位都有效時,預覽會立刻顯示目前的軌道數、間距與對齊值。當任何欄位無效時,預覽會退回為一個安全的三欄兩列預設值,而不是顯示過時的輸入。
- 點擊 Generate CSS,複製產生的 .grid 規則。如果剪貼簿權限被阻擋,請手動選取輸出區塊中的程式碼。
產生後再編輯任何控制項,會清除先前的 CSS 區塊、先前的錯誤,以及先前的複製狀態。這能讓顯示的規則與你在預覽中檢查的值保持同步,避免在版面已經變動後,把過時的規則貼進去。預覽與產生的 CSS 來自同一組已驗證的設定,因此在單次編輯週期內不會出現不一致的情形。
解讀產生的 repeat() 與 minmax() 軌道
產生的規則以 display: grid 開頭,以建立 grid 格式化上下文。接著它會使用 repeat(n, minmax(0, 1fr)) 輸出 grid-template-columns 與 grid-template-rows。理解每個符號的作用,正是盲目複製規則與日後能夠除錯換行問題之間的差別。
repeat(n, minmax(0, 1fr)) 會在同一宣告中將同一個軌道函式寫入 n 次,而不必為了建立三欄 grid 而重複撰寫 1fr 1fr 1fr。n 是經驗證、介於 1 到 12 的軌道數。在 minmax() 中,最低值為零是最關鍵的部分:它讓軌道在內容很小時能縮到最小,而不是強迫軌道至少與其中最長的不可斷行字串同寬。若沒有這個零,儲存格中的一個長網址或寬圖片,可能會讓該軌道超出其在容器中應得的份額,打亂換行,並讓同層項目提前被擠到下一行。1fr 的上限則確保在空間分配完後,每個軌道大小仍然相等,這正是產生器所建構的實用等寬軌道模式。
同一條規則中的 gap 宣告使用單一像素長度,因此列與欄之間會出現相同的間距。零是有效的,表示完全不產生間距。產生器刻意將數值限制在 100px,因為這個工具是有界線的視覺建構器,而非任意 CSS 編輯器。它會直接拒絕 101 或 100.5,而不是默默地將它們夾在範圍內。當欄位為空、帶有正負號、含小數點、前後有空白、帶有單位後綴,或長度超過 32 個 UTF-16 字碼單位時,會回傳明確的錯誤且不產生 CSS,因此你複製的規則永遠能讓瀏覽器解析。
對齊每個換行後儲存格內的項目
儲存格內的對齊由兩個 CSS 屬性控制,產生器將它們以封閉列舉下拉選單的形式呈現。justify-items 控制每個 grid 項目在其 grid 區域內沿行內軸的對齊方式。align-items 則提供沿區塊軸對應的預設對齊。兩者各自提供的四個值——stretch、start、center、end——涵蓋了日常情境,而不會允許任意 CSS 注入。
| 值 | 行內軸 (justify-items) | 區塊軸 (align-items) |
|---|---|---|
| stretch | 當項目尺寸允許時,水平填滿儲存格 | 當項目尺寸允許時,垂直填滿儲存格 |
| start | 項目對齊至儲存格行內起點邊緣 | 項目對齊至儲存格區塊起點邊緣 |
| center | 項目置中於行內邊緣之間 | 項目置中於區塊邊緣之間 |
| end | 項目對齊至儲存格行內終點邊緣 | 項目對齊至儲存格區塊終點邊緣 |
這些設定會對齊項目在其所指派的區域內的位置。它們並非 justify-content 或 align-content——後兩者是用來將 grid 軌道作為群組對齊於較大的容器中——也不會透過 grid-row、grid-column 或 grid-area 來擺放個別項目。如果你的版面需要針對不同列或不同儲存格使用不同的對齊方式,產生器的輸出只是起點;個別項目的覆寫仍須自行撰寫。
有一個值得注意的安全細節:對齊值會針對上述確切的四個內部值進行嚴格的列舉驗證。像 center 後面接著另一段宣告這種經過刻意拼裝的值,在字串產生之前就會被拒絕,即使呼叫者繞過了可見的下拉選單也一樣。輸出中的 CSS 屬性名稱、標點、單位、repeat()、minmax() 與 fr 符號都由實作固定,因此規則是確定性的,而不是使用者提供片段的重新組合。
有界線的輸入與產生器會拒絕的內容
由於這個工具的設計目的是產生符合標準的 CSS,而不是自由格式的樣式表文字,因此每個輸入都有嚴格的範圍。欄數與列數只接受 1 到 12 之間的十進位整數。間距只接受 0 到 100 之間的十進位整數。任何超出這些範圍的值、帶正負號或小數點的值、帶單位後綴或前後有空白,以及長度超過 32 個 UTF-16 字碼單位的輸入,都會回傳錯誤且不產生輸出。
這種嚴格的解析是刻意為之。產生器絕不會默默把 13 欄壓成 12 欄,絕不會把 100.5 四捨五入為 100,也絕不會讓多餘的 px 後綴溜進輸出的宣告中。結果就是你所輸入的數字,正是你在 CSS 中得到的數字,讓工具重啟後換行行為依然可預測。
預覽遵循同樣的紀律。它永遠可見,而且源自與產生 CSS 同一組已驗證的設定。當某個欄位無效時,預覽會重設為文件中規範的安全三欄兩列預設值,而不是呈現過時或部分解讀的版面。如果預覽看起來像安全預設值,原因在於其上方某個欄位的輸入錯誤,而非工具本身的 bug。較大的間距或十二乘十二的 grid 可能會讓範例儲存格變得非常小,或需要捲動才能看到,但輸出仍會包含你所要求的精確數值。
Adding Responsive Wrapping on Top of the Generated Rule
The generated rule is a single explicit grid. It does not automatically adapt its column count to viewport size, because each track count is fixed by the input you supplied. For a layout that should drop from four columns on desktop to two on tablet to one on mobile, the generator output is the desktop starting point; the responsive rules are added separately.
Three practical extensions cover most real layouts. Media queries let you swap the entire grid-template-columns declaration at breakpoint boundaries. Container queries do the same in response to a parent container's inline size, which works well inside reusable components. The auto-fit pattern with minmax(min, 1fr) creates a wrapping track count that grows and shrinks with available space, which is the closest match to a true wrap behavior because the engine decides how many tracks fit at any given width.
None of these patterns appear in the copied output, because the generator is a bounded builder rather than a responsive framework. Its job is to produce a validated, parseable rule for one explicit grid. For a deeper look at how repeat() and minmax() interact inside a flexible grid, the walkthrough on making a CSS grid flexible with fr and minmax extends the same track vocabulary for responsive cases. Use the generated rule as a starting point and adapt it to the actual content and breakpoints of the project.
The MDN reference for align-items is the place to verify the exact alignment values used in the rule. The CSS Grid Layout Module Level 2 specification anchors the grid-template-columns, grid-template-rows, repeat(), fr, and gap behavior the generator relies on, so the rule you copy is standards-based rather than vendor-specific. Finally, remember that visual grid reordering should never replace logical document order. Keyboard navigation and assistive technology follow the source, so wrap placement that looks correct visually can still leave the underlying markup in the wrong reading order. Build the semantic HTML first, then adapt the generated declarations to that structure.
For a deeper look, see How to Get Flexbox CSS From a Local Generator.