Tocas UI Getting Started Components Examples
GitHub
Tocas UI

Grid

A grid is used to harmonize negative space in a layout.
Introduction
Getting Started Colors Responsive Utilities
Layout
Container Control Grid Wrap
Form
Button Checkbox Fieldset File Input Radio Select Selection Switch
Paragraphy
Box Content Divider Header Quote Text
Feedback
Blankslate Gauge Loading Mask Notice Procedure Progress Snackbar
Interaction
Accordion Dropdown Modal Popover Tooltip
Media
Flag Icon Iconset Image Imageset
Data
Badge Checklist Chip Close Conversation List Meta Rating Statistic Table Timeline
Navigation
Breadcrumb Menu Pagination Tab
Application
App Center App Drawer App Layout App Navbar App Sidebar App Topbar
Example
Theme
Auto
Auto
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>
Concepts
Column Widths

A grid has 16 columns per row. Columns without a set width adjust to content.

This example uses columns of 2, 8, and 6 widths, 2 + 8 + 6 = 16; and that fills a row.

<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>
Wrapping

Columns wrap to the next row if their total width exceeds 16 columns.

This example uses columns of 5, 6, and 8 widths, and 5 + 6 + 8 = 19; so the extra column wraps to the next row.

<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>
Column Count

A grid can have different columns per row with is-1-columns to is-10-columns.

<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>
Evenly Divided

A grid can auto-resize columns to split width evenly: 2 columns at 50%, 3 columns at 33%, etc.

<div class="ts-grid is-evenly-divided">
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
</div>
Nesting Grids

Grids can be placed inside of other grids, letting you sub-divide columns.

<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>
Column
Fluid

A column can take the width of the remaining space.

<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>
First and Last

A column can be moved to the first or last.

<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>
Ordering

A column can be reordered with is-order-1 to is-order-10. All columns must have a set order. Ideal for reordering on mobile with Responsive.

<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>
Variations
Horizontal Aligns

A grid can have its columns aligned at the start, center, or end.

<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>
Vertical Aligns

A grid can have its columns aligned at the top, middle, or bottom.

<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>
Stretched

A grid can stretch its first-level elements or a Box to match the height of other columns.

This card contains a line of text.

This card contains two lines of text.

This card contains two lines of text.

This card contains three lines of text.

This card contains three lines of text.

All cards have the same height.

<div class="ts-grid is-stretched is-3-columns">
    <div class="column">
        <div class="ts-box">
            <div class="ts-content">
                <p>This card contains a line of text.</p>
            </div>
        </div>
    </div>
    <div class="column">
        <div class="ts-box">
            <div class="ts-content">
                <p>This card contains two lines of text.</p>
                <p>This card contains two lines of text.</p>
            </div>
        </div>
    </div>
    <div class="column">
        <div class="ts-box">
            <div class="ts-content">
                <p>This card contains three lines of text.</p>
                <p>This card contains three lines of text.</p>
                <p>All cards have the same height.</p>
            </div>
        </div>
    </div>
</div>
Divided

A grid can have dividers between columns, but only in a single-row grid.

<div class="ts-grid is-divided is-3-columns">
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
</div>
Space Between and Around

A grid can have spaces between or around its columns.

<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>
Reversed

A grid can specify that its columns should reverse order, works well with Responsive.

<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>
Stacked

A stacked grid will automatically stack rows into a single column, ideal for mobile devices with Responsive.

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

A grid can adjust the gap between columns.

<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 Design

Everything works well with Responsive in Tocas UI. The following example is a basic guide.

Column Widths

Column width can vary by device; e.g., tablet+:is-8-wide displays as 8 columns wide on tablets or larger.

<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>
Stacked

Applying is-stacked on mobile devices stacks rows into a single column (sets all columns to 16 columns wide).

<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>
Column Count

Change column number by device; e.g., mobile:is-2-columns for 2 columns on mobile, and tablet+:is-3-columns for 3 columns on tablets or larger.

<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>
Visibility

Columns can appear or be hidden on specific devices or screen sizes. See Responsive for details.

<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>
Compositions
Search Bar

Search bars usually have flexible and fixed columns. Columns without a set width adjust to their content.

<div class="ts-grid">
    <div class="column is-fluid">
        <div class="ts-input">
            <input type="text" class="input" placeholder="Search articles..." />
        </div>
    </div>
    <div class="column">
        <button class="ts-button">Submit</button>
    </div>
</div>
CSS Variables
Description

The width of the gap between columns.
Looking for similar components?
Concepts
Column Widths is-2-wide Wrapping is-5-wide Column Count is-3-columns Evenly Divided is-evenly-divided Nesting Grids ts-grid
Column
Fluid is-fluid First and Last is-first Ordering is-order-4
Variations
Horizontal Aligns is-start-aligned Vertical Aligns is-top-aligned Stretched is-stretched Divided is-divided Space Between and Around is-spaced-between Reversed is-reversed Stacked is-stacked Density is-relaxed
Responsive Design
Column Widths mobile:is-16-wide Stacked mobile:is-stacked Column Count mobile:is-2-columns Visibility mobile:has-hidden
Compositions
Search Bar is-fluid
GitHub Getting Started Components Examples
Designed by Yami Odymel from Taiwan, along with the ❤️ from contributors. The source code is licensed under MIT, and the documentation is under CC 0 public domain. Feel free to use, share, or contribute. Tocas UI is a design system for Caris Events, part of Sorae & Co., Ltd.
Translators: Yami Odymel
Trademark of the owner of Tocas UI