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


The following example creates three equal-width columns on tablet, desktop, and widescreen devices. Columns must have a row as a parent.

col 1
col 2
col 3
Show code snippet
<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>

Grid can be divided into 12 columns with size classes for each part 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
Show code snippet
<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>

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

col is-6 is-offset-3
col is-3 is-offset-9
Show code snippet
<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>

You can nest columns to have 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
Show code snippet
<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