範例
明暗色系
遵循使用者設定
遵循使用者設定
亮色
暗色
縮放
標準
放大
標準
縮小
<div class="ts-grid">
<div class="column is-4-wide"></div>
<div class="column is-4-wide"></div>
<div class="column is-4-wide"></div>
<div class="column is-4-wide"></div>
</div>
概要
在 Tocas UI 裡,網格系統的每行都被劃分為 16 格寬度。為了方便展示網格系統,我們將背景加上了灰色與輔助數字,在實際應用中這些都並不會出現。
如果你希望有個欄位可以填滿剩餘空間,請參閱水平排列元件。
概念
我們稱被劃分開來的區塊為「欄位」,每個欄位的寬度都是可以自己決定的。
正如前言所述:「每行有 16 格寬」,而這個範例的第一行正好有四個 4 格寬的欄位,所以 4 x 4 = 16
剛好是 16 格。
另一行是則是由 2 格、8 格還有 6 格寬的欄位所組成,這意味著 2 + 8 + 6 = 16
也剛好達到了一行的最大格數。
<div class="ts-grid">
<div class="column is-4-wide"></div>
<div class="column is-4-wide"></div>
<div class="column is-4-wide"></div>
<div class="column is-4-wide"></div>
<div class="column is-2-wide"></div>
<div class="column is-8-wide"></div>
<div class="column is-6-wide"></div>
</div>
如果單行欄位的寬度加起來超過 16 格寬,溢出來的欄位會自動換行。
<div class="ts-grid">
<div class="column is-5-wide"></div>
<div class="column is-6-wide"></div>
<div class="column is-8-wide"></div>
</div>
若希望單行裡面有三個欄位,你可能會發現…噢不!16 格並沒有辦法整除 3!這個時候可以直接指定網格系統的單行要有幾個欄位。
<div class="ts-grid is-3-columns">
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
</div>
<div class="ts-grid is-6-columns">
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
</div>
若希望每個欄位都能有相同的寬度,就可以使用均分。舉例來說:如果有 2 個欄位那麼就會各佔一半的寬度,若有 3 個欄位則是每個都三分之一…以此類推。
<div class="ts-grid is-evenly-divided">
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
</div>
網格系統內可以還可以再有另一個網格系統。這樣你便能在單個欄位裡再進行寬度細分。
<div class="ts-grid is-2-columns">
<div class="column">
<div class="ts-grid is-4-columns">
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
</div>
</div>
<div class="column"></div>
</div>
外觀
網格系統裡欄位的間距可以更密或是更寬鬆。
<div class="ts-grid is-relaxed is-3-columns">
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
</div>
<div class="ts-grid is-3-columns">
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
</div>
<div class="ts-grid is-compact is-3-columns">
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
</div>
響應式設計
這會不論原訂的欄位寬度,在最小化介面時會自動令所有欄位各自獨立成為一行(便是將所有欄位設置為 16 格寬)。
<div class="ts-grid is-stackable">
<div class="column is-4-wide"></div>
<div class="column is-4-wide"></div>
<div class="column is-4-wide"></div>
<div class="column is-4-wide"></div>
</div>
這會讓你的欄位在最小化和標準介面上以雙倍的寬度增加,例如:8 個欄位的網格系統會在標準介面上變成 4 個欄位,然後最小化介面上則會變成 2 個欄位。
<div class="ts-grid is-doubling is-8-columns">
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
</div>
<div class="ts-grid is-doubling is-6-columns">
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
</div>
<div class="ts-grid is-doubling is-4-columns">
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
</div>
欄位所佔的格數寬度可以依據介面狀態而有所不同,相關介面尺寸請參閱響應式設計頁面。舉例來說:is-8-minimal
會在最小化介面上以 8 格寬的方式呈現。
<div class="ts-grid">
<div class="column is-16-minimal is-8-standard is-4-maximal"></div>
<div class="column is-16-minimal is-8-standard is-4-maximal"></div>
<div class="column is-16-minimal is-8-standard is-4-maximal"></div>
<div class="column is-16-minimal is-8-standard is-4-maximal"></div>
</div>
某些欄位可以只在指定介面尺寸上呈現、隱藏,相關使用方式請參閱響應式設計頁面。
<div class="ts-grid">
<div class="column is-not-minimal is-4-wide"></div>
<div class="column is-minimal-only is-4-wide"></div>
<div class="column is-standard-only is-4-wide"></div>
<div class="column is-maximal-only is-4-wide"></div>
</div>