Tad 教材網 - 線上書籍

:::

Groundwork CSS
==============

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

```
<pre class="brush:xml;">
<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
 
###  強制手機格線（加一個 <span style="background-color:#ffff00;">mobile </span>在分子和分母中間），

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

```
<pre class="brush:xml;">
<div class="row">
  <div class="one mobile half">1/2</div>
  <div class="one mobile half">1/2</div>
</div>
```

###  強制平板格線（加一個 <span style="background-color:#ffff00;">small-tablet </span>在分子和分母中間）

```
<pre class="brush:xml;">
<div class="row">
  <div class="one small-tablet half">1/2</div>
  <div class="one small-tablet half">1/2</div>
</div>
```

###  綜合起來：

```
<pre class="brush:xml;">
<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...
 
 ```
<pre class="brush:xml;">
<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>
```

###  置中（加一個 <span style="background-color:#ffff00;">centered</span><span style="background-color:#ffff00;"> </span>在分子和分母中間）

```
<pre class="brush:xml;">
<div class="row">
  <div class="one centered mobile third">1/3</div>
</div>
```

###  往右偏移（加一個 <span style="background-color:#ffff00;">skip-N(幾格)</span>在分母後面）

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

```
<pre class="brush:xml;">
<div class="row">
  <div class="<span><a class="attribute-value">ten mobile twelfths skip-two</a></span>">10/12（左邊會空兩格）</div>
</div>
```

:::