2. 格線系統 The Grid

版面布局：採用「幾分之幾」的方式

<div class="row">
  <div class="one thirds">1/3</div>
  <div class="two third">2/3</div>
</div>

常用幾分之幾：

• 1/2： one half
• 1/3： one third
• 2/3： two thirds
• 1/4： one fourth
• 3/4： three fourths
• 1/5： one fifth
• 4/5： four fifths
• 1/6： one sixth
• 5/6： five sixths
• 1/7： one seventh
• 6/7： six sevenths
• 1/8： one eighth
• 7/8： seven eighths
• 1/9： one ninth
• 8/9： eight ninth
• 1/10： one tenth
• 9/10： nine tenth
• 1/11：one eleventh
• 10/11：ten elevenths
• 1/12： one twelfth
• 11/12： eleven twelfths

強制手機格線（加一個 mobile 在分子和分母中間），

所謂「強制」指的就是：左右分就是左右分，即使螢幕縮小也不會變成上下分。

<div class="row">
  <div class="one mobile half">1/2</div>
  <div class="one mobile half">1/2</div>
</div>

強制平板格線（加一個 small-tablet 在分子和分母中間）

<div class="row">
  <div class="one small-tablet half">1/2</div>
  <div class="one small-tablet half">1/2</div>
</div>

綜合起來：

<div class="row">
  <div class="two thirds">Normal</div>
  <div class="one third">Normal</div>
</div>
<div class="row">
  <div class="two small-tablet thirds">Small Tablet</div>
  <div class="one small-tablet third">Small Tablet</div>
</div>
<div class="row">
  <div class="two mobile thirds">Mobile</div>
  <div class="one mobile third">Mobile</div>
</div>

自動邊距

在任何的class後面補上padded，即可替該段落加上邊距，非常彈性。

自動重排

• 大螢幕排列時不按照原始碼順序，而是用文字描述其左右位置。
• 小螢幕則不管文字描述，直接按照原先的原始碼先後順序來上下排列。
• 文字直接加在「幾分之幾」後面，格式為『往哪個方向-移幾格』，例如 left-one、right-five...

<div class="row">
  <div class="three eighths right-five">3/8（大螢幕水平第三格，小螢幕垂直第一格）</div>
  <div class="two eighths left-three">2/8（大螢幕水平第一格，小螢幕垂直第二格）</div> 
  <div class="three eighths left-three">3/8（大螢幕水平第二格，小螢幕垂直第三格）</div>
</div>

置中（加一個 centered 在分子和分母中間）

<div class="row">
  <div class="one centered mobile third">1/3</div>
</div>

往右偏移（加一個 skip-N(幾格)在分母後面）

只能往右偏移，不能往左偏移

<div class="row">
  <div class="ten mobile twelfths skip-two">10/12（左邊會空兩格）</div>
</div>