Grid

Grid divide horizontal space into indivisible units called "columns". All columns in a grid must specify their width as proportion of the total available row width. All grid systems choose an arbitrary column count to allow per row and Design System uses 12 columns
col 1
col 2
col 3

Grid can be divided into 12 columns with size classes for each part from .is-2 to .is-12.

.is-2
1
1
1
1
1
1
1
1
1
1
.is-3
1
1
1
1
1
1
1
1
1
.is-6
1
1
1
1
1
1

Use empty column to create empty horizontal space from the left using .is-offset-x.

.is-6.is-offset-3
.is-3.is-offset-9
.is-5.is-offset-2

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

Usage

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 Use to divide the grid into 12 columns
is-offset-1 to .is-offset-12 Use to create horizontal space around .col elements
is-narrow Use to take the space it needs while the other column will fill up remaining space

Feedback

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

Tell us more