Grid

画面領域を分割するのに使用します。横方向グリッドは比較的良く使うと思います。
分割はGrid方式の12分割です。
Class
kk-grid 全方向グリッド
kk-grid-col 横方向グリッド
kk-grid-row 縦方向グリッド
kk-cell セル指定
kk-col[1-12] 横方向の幅指定
kk-row[1-12] 縦方向の高さ指定
kk-col*@s kk-row*@s 640px 以上の場合のみ有効
kk-col*@m kk-row*@m 960px 以上の場合のみ有効
kk-col*@l kk-row*@l 1200px 以上の場合のみ有効
Attribute
grid kk-gridの指定と同じ
grid-col kk-grid-colの指定と同じ
grid-row kk-grid-rowの指定と同じ
cell kk-cellの指定と同じ

Grid Column

横方向グリッド

横方向のグリッドです。属性grid-colを指定してください。
一番よく使うことになると思います。 
<div class="kk-container kk-margin-top" grid-col>
  <div class="kk-col1" cell>
    <div class="kk-box-dashed kk-align-center kk-bg-color-normal">1</div>
  </div>
  <div class="kk-col1" cell>
    <div class="kk-box-dashed kk-align-center kk-bg-color-normal">2</div>
  </div>
  <div class="kk-col1" cell>
    <div class="kk-box-dashed kk-align-center kk-bg-color-normal">3</div>
  </div>
  ・・・
</div>
1
2
3
4
5
6
7
8
9
10
11
12

Grid Row

縦方向グリッド

縦方向のグリッドです。属性grid-rowを指定してください。 
<div class="kk-container kk-margin-top" style="height: 340px;" grid-row>
  <div class="kk-row1" cell>
    <div class="kk-bg-color-normal" style="height: 100%;">1</div>
  </div>
  <div class="kk-row1" cell>
    <div class="kk-bg-color-normal" style="height: 100%;">2</div>
  </div>
  <div class="kk-row1" cell>
    <div class="kk-bg-color-normal" style="height: 100%;">3</div>
  </div>
  ・・・
</div>
1
2
3
4
5
6
7
8
9
10
11
12

Grid All

全方向グリッド

縦横を合わせた全方向のグリッドです。属性gridを指定してください。 
<div class="kk-container kk-margin-top" style="height: 340px;" grid>
  <div class="kk-col4 kk-row12" cell>
    <div class="kk-bg-color-normal" style="height: 100%;">col4<br>row12</div>
  </div>
  <div class="kk-col8 kk-row4" cell>
    <div class="kk-bg-color-normal" style="height: 100%;">col8<br>row4</div>
  </div>
  <div class="kk-col4 kk-row4" cell>
    <div class="kk-bg-color-normal" style="height: 100%;">col4<br>row4</div>
  </div>
  <div class="kk-col4 kk-row6" cell>
    <div class="kk-bg-color-normal" style="height: 100%;">col4<br>row6</div>
  </div>
</div>
col4
row12
col8
row4
col4
row4
col4
row6

Responsive

レスポンシブ

kk-col*@sのような記述をすることで、ウィンドウ幅に応じて可変幅の指定を実現できます。
さらにグリッドを入れ子にすることで、下記のようなレイアウトを実現できます。
ウィンドウ幅(PC or スマホ)によりレイアウトが変わりますので、お試しください。 
<div class="kk-container kk-margin-top" grid-col>
  <div class="kk-col6@s kk-col12" grid-col>
    <div class="kk-col6@s kk-col12" cell>
      <div class="kk-bg-color-normal">1</div>
    </div>
    <div class="kk-col6@s kk-col12" cell>
      <div class="kk-bg-color-normal">2</div>
    </div>
    <div class="kk-col12" cell>
      <div class="kk-bg-color-normal">3</div>
    </div>
  </div>
  <div class="kk-col6@s kk-col12" grid-col>
    <div class="kk-col12" cell>
      <div class="kk-bg-color-normal">4</div>
    </div>
    <div class="kk-col12" cell>
      <div class="kk-bg-color-normal">5</div>
    </div>
  </div>
</div>
1
2
3
4
5