ionic-CSS：Grid(網格)

Grid(網格)

ionic 的網格(Grid)和其他大部分框架有所不同，它採用了彈性盒子模型(Flexible Box Model) 。 而且在移動端，基本上的手機都支援flexbox。row 樣式指定行，col 樣式指定列。

在row簡單新增columns,columns會被平分row的空間. 如果有三列,就新增三列, 有五列就新增五列. 不像 bootstrap, ionic沒有12列的限制,也沒有列大小的限制. 你還可以在每個列中設定垂直居中.

row 類是用來定義行,col 是用來定義列. 在下邊的demo裡面,我們有4列和2列.但我們也可以用3, 6, 7, 23 等等, 不重要. 關鍵在於建立你想要的列,不用擔心他們的佔位百分比, 因為都是自動的.
注意: 例子中新增了邊框和灰色背景以便於能夠被清晰的看到行列結構.

---

Grid: Evenly Spaced Columns(同等大小網格)

在帶有 row 的樣式的元素裡如果包含了 col 的樣式，col 就會設定為同等大小。 以下例項中 row 的樣式包含了 5 個 col 樣式，每個col 的寬度為 20%。

<div class="row"> 
  <div class="col">.col</div> 
  <div class="col">.col</div> 
  <div class="col">.col</div> 
  <div class="col">.col</div> 
  <div class="col">.col</div>
</div>

注意: 例子中新增了邊框和灰色背景以便於能夠被清晰的看到行列結構.

---

Grid: Explicit Column Sizes(指定列寬)

你 可以 設定一行中各個列的大小不一樣。預設情況下，列都會被劃分為同等大小。但你也可以按百分比來設定列的寬度（一行為 12 個網格）。
使用柵格系統的好處在於你只需要指明你需要的列佔位百分比即可,其他的列就會被平均分配使用剩下的空間.

<div class="row"> 
  <div class="col col-50">.col.col-50</div> 
  <div class="col">.col</div> 
  <div class="col">.col</div>
</div>
<div class="row"> 
  <div class="col col-75">.col.col-75</div> 
  <div class="col">.col</div>
</div>
<div class="row"> 
  <div class="col">.col</div> 
  <div class="col col-75">.col.col-75</div>
</div>
<div class="row"> 
  <div class="col">.col</div> 
  <div class="col">.col</div>
</div>

注意: 例子中新增了邊框和灰色背景以便於能夠被清晰的看到行列結構.

下面列出了指定列寬的一些百分比的樣式名:

---

Grid: Offset Columns(有偏移量的網格)

列可以設定左側偏移量，例項如下：

<div class="row"> 
  <div class="col col-33 col-offset-33">.col</div> 
  <div class="col">.col</div>  
</div>

<div class="row"> 
  <div class="col col-33">.col</div> 
  <div class="col col-33 col-offset-33">.col</div>
</div>

<div class="row"> 
  <div class="col col-33 col-offset-67">.col</div>
</div>

注意: 例子中新增了邊框和灰色背景以便於能夠被清晰的看到行列結構.
下面列出了指定列寬的一些百分比的樣式名:

---

Grid: Wrap Columns(換行網格)

預設為不換行當我們需要換行的時候只需要新增row-wrap即可

<div class="row row-wrap"> 
  <div class="col col-25">.col-1</div> 
  <div class="col col-25">.col-2</div> 
  <div class="col col-25">.col-3</div> 
  <div class="col col-25">.col-4</div> 
  <div class="col col-25">.col-5</div> 
  <div class="col col-25">.col-6</div>
</div>

---

Grid: Vertically Align Columns(縱向對齊網格)

彈性盒子模型可以很容易設定列縱向對齊。縱向對齊包含頂部，中間部分，底部，可以應用到每一行的列，或者指定的某列。

例項中，最後一列設定了最高的內容用於更好的演示縱向對齊網格。

<div class="row"> 
  <div class="col">.col</div> 
  <div class="col">.col</div> 
  <div class="col">.col</div> 
  <div class="col">1<br>2<br>3<br>4</div>
</div>

<div class="row"> 
  <div class="col col-top">.col</div> 
  <div class="col col-center">.col</div> 
  <div class="col col-bottom">.col</div> 
  <div class="col">1<br>2<br>3<br>4</div>
</div>

<div class="row row-top"> 
  <div class="col">.col</div> 
  <div class="col">.col</div> 
  <div class="col">.col</div> 
  <div class="col">1<br>2<br>3<br>4</div>
</div>

<div class="row row-center"> 
  <div class="col">.col</div> 
  <div class="col">.col</div> 
  <div class="col">.col</div> 
  <div class="col">1<br>2<br>3<br>4</div>
</div>

<div class="row row-bottom"> 
  <div class="col">.col</div> 
  <div class="col">.col</div> 
  <div class="col">.col</div> 
  <div class="col">1<br>2<br>3<br>4</div>
</div>

注意: 例子中新增了邊框和灰色背景以便於能夠被清晰的看到行列結構.

---

Responsive Grid(響應式網格)

手持裝置螢幕在切換時，例如橫屏，豎屏等。就需要設定每行的網格可以實現根據不同寬度自適應大小。

不同裝置響應式類的樣式如下:

<div class="row responsive-sm">       
  <div class="col">.col</div> 
  <div class="col">.col</div> 
  <div class="col">.col</div> 
  <div class="col">.col</div>
</div>

注意: 例子中新增了邊框和灰色背景以便於能夠被清晰的看到行列結構.

以後配置中, 每一個使用Sass變數的類都可以替換為你喜歡的樣式. 你還可以使用responsive-grid-break來建立你自己的類.