Grid System
Lazy4 的 Grid System 採用 CSS Flex，因此如果專案要符合 IE 瀏覽器，敬請小心服用。在使用 Grid system 之前，設計稿建議先設定好網格再繪製，如此才能將落差降到最低。Sketch 本身內建 Layout 設定；Photoshop 可安裝套件輔助，例如：GrideGride, Velositey, 960gs 等等。
斷點 Breakpoints
Lazy 的 Grid System 都是由小螢幕裝置推演到大螢幕裝置，隨著不同螢幕尺寸會透過 media query 搭配合適的區間範圍做不同的切換。基本上你可以試著想像由 0 開始直到最大尺寸，最小尺寸不帶字根為最基礎設置。以下為每個斷點配置：
| All | > 576px | > 768px | > 1024px | > 1280px | |
|---|---|---|---|---|---|
| 字根 | @sm | @md | @lg | @xl | |
| Container 最大寬度 | 100% | 540px | 720px | 960px | 1200px |
| 欄位間距 | 1rem | 1.5rem | 2rem | ||
Container
使用 Grid System 之前，請先在最外部設置一個容器 .container，Container 最大顯示寬度可參照上方斷點區間表格。如果不需要最大寬度設定，可使用 container-fluid，則 Container 會維持 100% 寬度。
Row & Column
Lazy4 只提供 12 欄配置，取消了 5 欄與 7 欄的配置，但是在新版的 Grid System 依然可達到 5 與 7 的排列效果。新版的 Grid System 在 Class 命名上與前版有很大的不同，首先無論是 Row 或是 Column 都需要前綴詞 .f-，聰明如你應該可以猜到 f 指的是 flex。使用 Column 之前必須先用 Row，再將 Column 放置到 Row 之下，使用方式與前版大致相同。配斷點時則使用 @ 來表示；選擇欄位數時請使用 : 來銜接欄位數量。請看以下範例：
12 Columns
每個指定欄位數欄位的使用方式為 .f-col:*。* 等於 * 個欄位寬度，最小為 1、最大為 12，均為整數。每一行的總和不超過 12，超過則會斷行排列，例如：3+4+5=12 或是 2+6+4=12。
不指定欄位數
大部分情況下 .f-col 都會賦予欄位數，Lazy4 可以允許不指定欄位數，則會依照同一個 Row 裡的 Column 數平均分配寬度，因此如果要使用 5 欄或 7 欄時，可以直接給予 .f-col 即可。
5 Columns
7 Columns
有指定與無指定欄位數的 Column 是可以交叉使用的。以下方第一個例子來說，如果兩個欄位當中一個指定為 7，另一個則會自動算出寬度與 5 相同寬度的欄位，Flex 會自動計算總和為 12 給予適合的值。第二個例子當有兩個無指定欄位時，則會平均分配，寬度就會相當於 2.5 欄位寬。
自動縮放
Column 也可以隨著內容做自動寬度調整，只要指定欄位數改為 auto 即可，例如 .f-col:auto。Auto 也可以和有指定與無指定欄位交叉使用。
推移 Offset
當需要留白或是拉開兩個區塊之間的距離時，可以使用 Offset 來隔開所需的空間。使用方式為 .f-offset{@bp}:*，例如：.f-offset:2, .f-offset@md:4。Offset 也可以搭配斷點使用。以下範例皆使用 .f-offset:4。
當同一排有使用 Offset 時，必須將 Offset 所用到的數字與欄位數字一併計算，並且建議不超過總欄位數。
排序 Ordered
當欄位排列順序與 DOM 順序不同時，可用 Ordered 來指定排序位置。使用方式 .f-order{@bp}:*，Ordered 預設值為 0、最小值為 -1、最大值為 13，排列順序由小至大，例如：.f-order:-1, .f-order@md:3。以下範例來說，1 號欄位因為設定了 .f-order:2 大於預設的 0，所以 1 跑到最後一個位置，而 3 號欄位設定了 .f-order:-1 小於 0，所以排到第一位。