網格系統

針對內容格局、元件所設計的排版系統。
範例
明暗色系
遵循使用者設定
遵循使用者設定
亮色
暗色
縮放
標準
放大
標準
縮小
<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>
概念
欄位與寬度

網格系統每行為 16 格寬。欄位的寬度可以自行決定,沒有指定寬度的欄位會以其內容寬度為主。

這個範例由 2、8、6 格寬的欄位所組成,而 2 + 8 + 6 = 16 剛好達到了一行的最大格數。

<div class="ts-grid">
    <div class="column is-2-wide"></div>
    <div class="column is-8-wide"></div>
    <div class="column is-6-wide"></div>
</div>
欄位換行

如果單行的欄位寬度加起來超過 16 格寬,溢出來的欄位會自動換行。

這個範例由 5、6、8 格寬的欄位所組成,所以 5 + 6 + 8 = 19,多出來的欄位會換行。

<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>
欄位數量

透過 is-1-columnsis-10-columns 指定單行要有幾個欄位,避免某些欄位沒辦法被 16 整除。

<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 個欄位會各佔 50%,而 3 個欄位會均分成 33%…以此類推。

<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">
    <div class="column is-4-wide"></div>
    <div class="column is-fluid"></div>
    <div class="column is-4-wide"></div>
</div>

把某個欄位的排序調到第一個或是最後一個。

<div class="ts-grid">
    <div class="column is-4-wide"></div>
    <div class="column is-4-wide"></div>
    <div class="column is-8-wide is-first"></div>
</div>
<div class="ts-grid">
    <div class="column is-8-wide is-last"></div>
    <div class="column is-4-wide"></div>
    <div class="column is-4-wide"></div>
</div>
指定順序

透過 is-order-1is-order-10 重新排序欄位,使用此功能時所有的欄位都必須指定順序。適合搭配響應式設計來在行動裝置上重新排序欄位。

<div class="ts-grid">
    <div class="column is-2-wide is-order-4"></div>
    <div class="column is-3-wide is-order-3"></div>
    <div class="column is-4-wide is-order-2"></div>
    <div class="column is-7-wide is-order-1"></div>
</div>
外觀
水平對齊

項目可以選擇靠左、中或右對齊。

<div class="ts-grid is-start-aligned">
    <div class="column is-3-wide"></div>
    <div class="column is-3-wide"></div>
    <div class="column is-3-wide"></div>
</div>
<div class="ts-grid is-center-aligned">
    <div class="column is-3-wide"></div>
    <div class="column is-3-wide"></div>
    <div class="column is-3-wide"></div>
</div>
<div class="ts-grid is-end-aligned">
    <div class="column is-3-wide"></div>
    <div class="column is-3-wide"></div>
    <div class="column is-3-wide"></div>
</div>
垂直對齊

可以根據項目之間的高度,更改其上、中或下對齊方式。

<div class="ts-grid is-top-aligned is-3-columns">
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
</div>
<div class="ts-grid is-middle-aligned is-3-columns">
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
</div>
<div class="ts-grid is-bottom-aligned is-3-columns">
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
</div>
高度拉伸的

使欄位裡的箱型容器或第一層的元素高度拉伸至與其他欄位相同。

這個片段有一行文字。

這個片段有兩行文字。

這個片段有兩行文字。

這個片段有三行文字。

這個片段有三行文字。

每個片段高度都一樣。

<div class="ts-grid is-stretched is-3-columns">
    <div class="column">
        <div class="ts-box">
            <div class="ts-content">
                <p>這個片段有一行文字。</p>
            </div>
        </div>
    </div>
    <div class="column">
        <div class="ts-box">
            <div class="ts-content">
                <p>這個片段有兩行文字。</p>
                <p>這個片段有兩行文字。</p>
            </div>
        </div>
    </div>
    <div class="column">
        <div class="ts-box">
            <div class="ts-content">
                <p>這個片段有三行文字。</p>
                <p>這個片段有三行文字。</p>
                <p>每個片段高度都一樣。</p>
            </div>
        </div>
    </div>
</div>
分隔的

讓欄位之間有垂直分隔線區隔項目,僅適用於單行的網格系統。

<div class="ts-grid is-divided is-3-columns">
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
</div>
空白圍繞

使空白圍繞在欄位之間或是周圍。

<div class="ts-grid is-spaced-between">
    <div class="column is-3-wide"></div>
    <div class="column is-3-wide"></div>
    <div class="column is-3-wide"></div>
</div>
<div class="ts-grid is-spaced-around">
    <div class="column is-3-wide"></div>
    <div class="column is-3-wide"></div>
    <div class="column is-3-wide"></div>
</div>
顛倒順序

顛倒網格系統裡所有欄位順序,適合搭配響應式設計來在行動裝置上使用這個樣式。

<div class="ts-grid is-reversed">
    <div class="column is-2-wide"></div>
    <div class="column is-4-wide"></div>
    <div class="column is-10-wide"></div>
</div>
層疊的

所有欄位會被迫獨立成為一行(便是將所有欄位設置為 16 格寬),適合搭配響應式設計在行動裝置上讓所有欄位層疊起來。

<div class="ts-grid is-stacked">
    <div class="column is-2-wide"></div>
    <div class="column is-3-wide"></div>
    <div class="column is-4-wide"></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>
響應式設計

在 Tocas UI 裡,所有東西都可以套用響應式設計,下列範例僅作為基本的指導教學。

指定寬度

欄位所佔的格數寬度可以依據裝置而有所不同,舉例來說:tablet+:is-8-wide 會在平板或更大的裝置上以 8 格寬的方式呈現。

<div class="ts-grid">
    <div class="column mobile:is-16-wide tablet+:is-8-wide"></div>
    <div class="column mobile:is-16-wide tablet+:is-8-wide"></div>
    <div class="column mobile:is-16-wide tablet+:is-8-wide"></div>
    <div class="column mobile:is-16-wide tablet+:is-8-wide"></div>
</div>
自動層疊

在手機裝置時套用 is-stacked 層疊樣式就能讓所有欄位被迫獨立成為一行(便是將所有欄位設置為 16 格寬)。

<div class="ts-grid mobile:is-stacked">
    <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>
指定數量

在指定裝置上變更一個網格系統的欄位數量,這個範例的 mobile:is-2-columns 表示行動裝置會有 2 欄,而 tablet+:is-3-columns 是指平板或是更大的裝置會有 3 欄。

<div class="ts-grid mobile:is-2-columns tablet+:is-3-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">
    <div class="column mobile:has-hidden is-4-wide"></div>
    <div class="column tablet+:has-hidden is-4-wide"></div>
    <div class="column desktop-:has-hidden is-4-wide"></div>
    <div class="column widescreen:has-hidden is-4-wide"></div>
</div>
組合應用
搜尋列

通常搜尋列會有流動欄位與固定欄位,沒有指定寬度的欄位會以其內容寬度為主。

<div class="ts-grid">
    <div class="column is-fluid">
        <div class="ts-input">
            <input type="text" class="input" placeholder="搜尋文章…" />
        </div>
    </div>
    <div class="column">
        <button class="ts-button">送出</button>
    </div>
</div>
樣式變數
說明

欄位之間的空白間隙寬度。

在尋找相似的元件嗎?
由來自 台灣的 Yami Odymel 所設計,當然還有貢獻者們的愛心❤️。原始碼授權方式為 MIT,文件則為 CC 0 公眾領域。還請盡情地使用、分享或一同改進。Tocas UI 是卡莉絲伊繁星的設計語言,而卡莉絲伊繁星屬對空音商事
台灣正體語系協作者:Yami Odymel、coin3x、Sea-n
擁有 Tocas UI 的所屬組織商標