Grid | Singapore Government Design System

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 is-6

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

Can't find a component?

Let us know what you need and we’ll be happy to look into it

Request component