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>is-6 is-offset-3</h6>
                </div>
            </div>
            <div class="row">
                <div class="col is-3 is-offset-9">
                    <h6>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>
        

Building a grid layout is simple:

  • Add a row element within a container
  • Add as many col elements as you want
<div class="sgds-container">
    <div class="row">
        <div class="col">
            <p>col 1</p>
        </div>
        <div class="col">
            <p>col 2</p>
        </div>
        <div class="col">
            <p>col 3</p>
        </div>
    </div>
</div>

Style
Modifier Description
is-1 to is-12 To divide the grid into 12 columns
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

Feedback

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

Chat with the team