Grid
Layout system designed for content and components.
Example
Theme
Default
Default
Light
Dark
Scale
Medium
Large
Medium
Small
<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>
Introduction

在 Tocas UI 裡,網格系統的每行都被劃分為 16 格寬度。為了方便展示網格系統,我們將背景加上了灰色與輔助數字,在實際應用中這些都並不會出現。

如果你希望有個欄位可以填滿剩餘空間,請參閱水平排列元件。

Concepts

我們稱被劃分開來的區塊為「欄位」,每個欄位的寬度都是可以自己決定的。

正如前言所述:「每行有 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>
Sub Grid

網格系統內可以還可以再有另一個網格系統。這樣你便能在單個欄位裡再進行寬度細分。

<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>
Variations
Density

網格系統裡欄位的間距可以更密或是更寬鬆。

<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>
Responsive
Stackable

這會不論原訂的欄位寬度,在最小化介面時會自動令所有欄位各自獨立成為一行(便是將所有欄位設置為 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>
Doubling

這會讓你的欄位在最小化和標準介面上以雙倍的寬度增加,例如: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>
Visibility

某些欄位可以只在指定介面尺寸上呈現、隱藏,相關使用方式請參閱響應式設計頁面。

<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>
Looking for similar components?
Designed by Yami Odymel from Taiwan with the love of the contributors ❤️. The source code is licensed under MIT and the documents are CC 0 public domain. Tocas UI is a design language of Caris Events, which is owned by Sorae & Co.
Translators: Yami Odymel