網格系統

針對內容格局、元件所設計的排版系統。
範例
明暗色系
遵循使用者設定
遵循使用者設定
亮色
暗色
縮放
標準
放大
標準
縮小
<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>
在尋找相似的元件嗎?
由來自 台灣的 Yami Odymel 所設計,當然還有貢獻者們的愛心❤️。原始碼授權方式為 MIT,文件則為 CC 0 公眾領域。還請盡情地使用、分享或一同改進。Tocas UI 是卡莉絲伊繁星的設計語言,而卡莉絲伊繁星屬對空音商事
台灣正體語系協作者:Yami Odymel、coin3x、Sea-n
擁有 Tocas UI 的所屬組織商標