Grid System

Lazy 的 Grid 包含了 Responsive,使用 Grid System 之前,請先參照 960gs,如果你使用了 960gs 但版面超過960的時候,你可以先以960為基準,剩下的寬度與間距比例交給 Lazy Grid 去計算。Kule Grid 有三種欄位設計,有 5, 7, 12 三種 Columns。通常排版時,會建議使用 12 Columns,5 和 7 兩種適合用在局部排版上,例如商品排列。

注意! 3.1 開始,kule.grid.min.css 或 kule-lazy.min.css 中的 Grid 只有 Column 12,如果需要使用 Column 5 或 Column 7 其他選項,請另外使用 kule-extend-grid.min.css。例如:

<link href="你的資料夾路徑/kule-grid.min.css" />
<link href="你的資料夾路徑/kule-extend-grid.min.css" />
<script src="你的資料夾路徑/kule-urbrowser.min.js" />

Grid 選項

請先看以下表格,初步了解 Grid 在不同寬度下的變化。

w < 768px w ≥ 768px w ≥ 992px w ≥ 1200px
Class
前綴詞
.col-
.col-xs- .col-sm- .col-md- .col-lg-
Container 寬度 100% 720px 960px 1152px
欄位間距 20px 30px

專案上如果不需要特別為手機或是平板裝置大小做設計時,可以一律使用 .col-*,如果需要對其他裝置做不同排版時,視情況使用 .col-xs-* , .col-sm-* , .col-md-* , .col-lg-*。在使用 Grid 之前,必須放置在 .container 之下,多個 Columns 可放置同一個 .container內。

Layout mode

當設計稿同時有 Mobile 與 Desktop 兩種時,可參考以下表格,使用以下 class 前綴詞之前記得先服用 urBrowser

Mobile Desktop
data-layout-mode mobile
data-device-type 為 mobile & w > 992px
desktop
data-device-type 為 desktop 或是
為mobile 並且 w > 992px
Class
前綴詞
.col-mb- .col-dt-

Container

.container 是一個容器,在不同螢幕寬度情形下提供了預設的寬度以、水平置中以及內距。如果你不需要使用預設寬度,可以不使用 .container

.col-6
.col-6
<div class="container">
    <div class="columns-12">
        <div class="col-6"></div>
        <div class="col-6"></div>
    </div>
</div>

選擇 Columns

Columns 的選擇是依照設計稿來做決定,如果依照 960gs 並且使用 12 欄,那麼就使用 .columns-12

每一欄位的使用以 .col-* 為開頭並且搭配數字,例如:.col-1。在 12 欄底下的 .col-1 就是指 1/12,因此每一排的總和建議不超過 12,舉例:3+4+5=12 或是 2+6+4=12。


5 Columns

每一排的欄位加總不超過 5,並且最大的欄位數為 5,最小為 1。

5
1
4
2
3
<div class="columns-5">
    <div class="col-1"></div>
    <div class="col-2"></div>
    <div class="col-3"></div>
    <div class="col-4"></div>
    <div class="col-5"></div>
</div>

7 Columns

每一排的欄位加總不超過 7,並且最大的欄位數為 7,最小為 1。

7
1
6
2
5
3
4
<div class="columns-7">
    <div class="col-1"></div>
    <div class="col-2"></div>
    <div class="col-3"></div>
    <div class="col-4"></div>
    <div class="col-5"></div>
    <div class="col-6"></div>
    <div class="col-7"></div>
</div>

12 Columns

每一排的欄位加總不超過 12,並且最大的欄位數為 12,最小為 1。

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

不同裝置寬度時的應用

當版面針對不同裝置寬度時做設計時,有時會有同一排不同寬度顯示的情況,這時你可以參考以下範例。

.col-6
.col-6
.col-6 .col-sm-4 .col-md-8
.col-6 .col-sm-8 .col-md-4
.col-6 .col-lg-3
.col-6 .col-lg-9
<div class="columns-12">
    <div class="col-6"></div>
    <div class="col-6"></div>
    <div class="col-6 col-sm-4 col-md-8"></div>
    <div class="col-6 col-sm-8 col-md-4"></div>
    <div class="col-6 col-lg-3"></div>
    <div class="col-6 col-lg-9"></div>
</div>

如果所有裝置版面設計相同或是不需要 RWD 時,只要使用 .col-* 即可。


Offset

當有時需要留白或是拉開兩個區塊之間的距離時,可以使用 Offset 來隔開所需的空間。使用方式與 .col-* 相似,請以 .col-offset-* 為開頭的前綴詞並且搭配數字,例如: .col-offset-1

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

5 Columns

2個Col + 2個Col + 1個Offset = 5 Columns

.col-2
.col-2 .col-offset-1
<div class="columns-5">
    <div class="col-2"></div>
    <div class="col-2 col-offset-1"></div>
</div>

7 Columns

2個Col + 3個Col + 2個Offset = 7 Columns

.col-2
.col-3 .col-offset-2
<div class="columns-7">
    <div class="col-2"></div>
    <div class="col-3 col-offset-2"></div>
</div>

12 Columns

3個Col + 7個Col + 2個Offset = 12 Columns

.col-3
.col-7 .col-offset-2
<div class="columns-12">
    <div class="col-3"></div>
    <div class="col-7 col-offset-2"></div>
</div>

Offset 可針對不同寬度範圍使用,例如 .col-md-offset-3

.col-3
.col-6 .col-md-offset-3
<div class="columns-12">
    <div class="col-3"></div>
    <div class="col-6 col-md-offset-3"></div>
</div>

Ordered

當要將兩個或多個欄位做左右對調時,可使用 .col-*-pull 或是 .col-*-push

.col-3 .col-push-9
.col-9 .col-pull-3
<div class="columns-12">
    <div class="col-3 col-push-9"></div>
    <div class="col-9 col-pull-3"></div>
</div>