Grid

Overview

Structure your content with a twelve-column system, powered by CSS flexbox.


Types

1) 3 Columns

The example below shows the creation of 3 equal-width columns on the tablet, desktop, and widescreen devices. Columns must have arow as a parent.

col 1
col 2
col 3
<section class="sgds-section">
    <div class="sgds-container">
        <div class="row">
            <div class="col">
                <h6>col 1</h6>
            </div>
            <div class="col">
                <h6>col 2</h6>
            </div>
            <div class="col">
                <h6>col 3</h6>
            </div>
        </div>
    </div>
</section>

2) 12 Columns

Grids can be divided into 12 columns with size classes ranging from is-2 to is-12. In the following example we see the difference between is-2 and is-6.

is-2
1
1
1
1
1
1
1
1
1
1
is-6
1
1
1
1
1
1
<div class="sgds-container">
    <div class="row">
        <div class="col is-2">
            <h6>is-2</h6>
        </div>
        <div class="col">
            <h6>1</h6>
        </div>
        <div class="col">
            <h6>1</h6>
        </div>
        <div class="col">
            <h6>1</h6>
        </div>
        <div class="col">
            <h6>1</h6>
        </div>
        <div class="col">
            <h6>1</h6>
        </div>
        <div class="col">
            <h6>1</h6>
        </div>
        <div class="col">
            <h6>1</h6>
        </div>
        <div class="col">
            <h6>1</h6>
        </div>
        <div class="col">
            <h6>1</h6>
        </div>
        <div class="col">
            <h6>1</h6>
        </div>
    </div>
    <div class="row">
        <div class="col is-6">
            <h6>is-6</h6>
        </div>
        <div class="col">
            <h6>1</h6>
        </div>
        <div class="col">
            <h6>1</h6>
        </div>
        <div class="col">
            <h6>1</h6>
        </div>
        <div class="col">
            <h6>1</h6>
        </div>
        <div class="col">
            <h6>1</h6>
        </div>
        <div class="col">
            <h6>1</h6>
        </div>
    </div>
</div>

3) Columns wrap to a new line

Use is-multiline on row elements to have columns automatically wrap to a new line.

col 1
col 2
col 3
col 4
col 5
<div class="sgds-container">
    <div class="row is-multiline">
        <div class="col is-12">
            <h6>col 1</h6>
        </div>
        <div class="col is-5">
            <h6>col 2</h6>
        </div>
        <div class="col is-7">
            <h6>col 3</h6>
        </div>
        <div class="col is-5">
            <h6>col 4</h6>
        </div>
        <div class="col is-8">
            <h6>col 5</h6>
        </div>
    </div>
</div>

4) Horizontal Space

Create empty horizontal space from the left using is-offset-X.

col is-6 is-offset-3
col is-3 is-offset-9
<div class="sgds-container">
    <div class="row">
        <div class="col is-6 is-offset-3">
            <h6>col is-6 is-offset-3</h6>
        </div>
    </div>
    <div class="row">
        <div class="col is-3 is-offset-9">
            <h6>col is-3 is-offset-9</h6>
        </div>
    </div>
</div>

5) Nest Columns

Nested columns provide you with more flexibility in your design.

row 1 col 1
row 1 col 2
row 2 col 1
row 2 col 2
row 2 col 3
<div class="sgds-container">
    <div class="row">
        <div class="col is-nested">
            <div class="row">
                <div class="col">
                    <h6>row 1 col 1</h6>
                </div>
                <div class="col">
                    <h6>row 1 col 2</h6>
                </div>
            </div>
        </div>
        <div class="col is-nested">
            <div class="row">
                <div class="col">
                    <h6>row 2 col 1</h6>
                </div>
                <div class="col">
                    <h6>row 2 col 2</h6>
                </div>
                <div class="col">
                    <h6>row 2 col 3</h6>
                </div>
            </div>
        </div>
    </div>
</div>

Style

Modifier Description
is-1 to is-12 To divide the grid into 12 columns
If you want to change the size of a single column, you can use one of the following classes:
is-half
is-one-thirds to is-two-thirds
is-one-quarters to is-three-quarters
is-one-fifths to is-four-fifths
is-full
is-offset-1 to is-offset-12 To create horizontal space around column elements
is-narrow To take the space it needs, while the other column takes up the remaining space
You can combine the above modifier with responsiveness classes to hide/show elements.
See Responsiveness documentation

Feedback

Having troubles with the guide? Please give us more details and we'll get back to you soon.

Chat with the team