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% 寬度。

Column 6
Column 6

Column 6
Column 6
<div class="container"></div> <div class="container-fluid"></div>

Row & Column

Lazy4 只提供 12 欄配置,取消了 5 欄與 7 欄的配置,但是在新版的 Grid System 依然可達到 5 與 7 的排列效果。新版的 Grid System 在 Class 命名上與前版有很大的不同,首先無論是 Row 或是 Column 都需要前綴詞 .f-,聰明如你應該可以猜到 f 指的是 flex。使用 Column 之前必須先用 Row,再將 Column 放置到 Row 之下,使用方式與前版大致相同。配斷點時則使用 @ 來表示;選擇欄位數時請使用 : 來銜接欄位數量。請看以下範例:

Column 12 10 8 6 4

12 Columns

每個指定欄位數欄位的使用方式為 .f-col:*。* 等於 * 個欄位寬度,最小為 1、最大為 12,均為整數。每一行的總和不超過 12,超過則會斷行排列,例如:3+4+5=12 或是 2+6+4=12。

12

11
1

10
2

9
3

8
4

7
5

6
6
<div class="f-row"> <div class="f-col:12"> <div class="f-col:11"> <div class="f-col:10"> <div class="f-col:9"> <div class="f-col:8"> <div class="f-col:7"> <div class="f-col:6"> <div class="f-col:5"> <div class="f-col:4"> <div class="f-col:3"> <div class="f-col:2"> <div class="f-col:1"> </div>

不指定欄位數

大部分情況下 .f-col 都會賦予欄位數,Lazy4 可以允許不指定欄位數,則會依照同一個 Row 裡的 Column 數平均分配寬度,因此如果要使用 5 欄或 7 欄時,可以直接給予 .f-col 即可。

5 Columns
<div class="f-row"> <div class="f-col"></div> <div class="f-col"></div> <div class="f-col"></div> <div class="f-col"></div> <div class="f-col"></div> </div>

7 Columns
<div class="f-row"> <div class="f-col"></div> <div class="f-col"></div> <div class="f-col"></div> <div class="f-col"></div> <div class="f-col"></div> <div class="f-col"></div> <div class="f-col"></div> </div>

有指定與無指定欄位數的 Column 是可以交叉使用的。以下方第一個例子來說,如果兩個欄位當中一個指定為 7,另一個則會自動算出寬度與 5 相同寬度的欄位,Flex 會自動計算總和為 12 給予適合的值。第二個例子當有兩個無指定欄位時,則會平均分配,寬度就會相當於 2.5 欄位寬。

7

7
<div class="f-row"> <div class="f-col"></div> <div class="f-col:7"></div> </div>

自動縮放

Column 也可以隨著內容做自動寬度調整,只要指定欄位數改為 auto 即可,例如 .f-col:auto。Auto 也可以和有指定與無指定欄位交叉使用。

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

3
Lorem ipsum dolor sit amet, consectetur adipisicing elit.

2
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<div class="f-row"> <div class="f-col"></div> <div class="f-col:auto"></div> </div>

推移 Offset

當需要留白或是拉開兩個區塊之間的距離時,可以使用 Offset 來隔開所需的空間。使用方式為 .f-offset{@bp}:*,例如:.f-offset:2, [email protected]:4。Offset 也可以搭配斷點使用。以下範例皆使用 .f-offset:4

當同一排有使用 Offset 時,必須將 Offset 所用到的數字與欄位數字一併計算,並且建議不超過總欄位數。

4
4

5
<div class="f-row"> <div class="f-col:4"></div> <div class="f-col:4 f-offset:4"></div> </div> <div class="f-row"> <div class="f-col"></div> <div class="f-col:4 f-offset:4"></div> </div>

排序 Ordered

當欄位排列順序與 DOM 順序不同時,可用 Ordered 來指定排序位置。使用方式 .f-order{@bp}:*,Ordered 預設值為 0、最小值為 -1、最大值為 13,排列順序由小至大,例如:.f-order:-1, [email protected]:3。以下範例來說,1 號欄位因為設定了 .f-order:2 大於預設的 0,所以 1 跑到最後一個位置,而 3 號欄位設定了 .f-order:-1 小於 0,所以排到第一位。

1
2
3
4
<div class="f-row"> <div class="f-col:3 f-order:2">1</div> <div class="f-col:3">2</div> <div class="f-col:3 f-order:-1">3</div> <div class="f-col:3">4</div> </div>