Standard Life Digital Framework

Grid

full screen new window example HTML markup

A Grid system allows the user to create complex layouts with the powerful grid system as well as providing responsive utility classes.

Usage

Containers

Containers are the most basic layout element and are required for all layouts. Create a fixed width container with the class .container or create a full width container with .container-fluid

Rows

Rows are wrappers for columns, place a row directly nested inside a container to create a single row with the class .row. If the number of columns exceeds the maximum column amount of 12 then the columns will wrap underneath inside the same row.

Columns

Columns contain the content, place columns directly nested inside a row to create multiple columns layouts. Column layouts are displayed mobile first so to create a responsive grid use the below breakpoint infixes. .col-12 will expand the full width of the container, col-6 will expand half of the container.

Example

1 column layout stacked on mobile and 2 column layout on medium screens and above


<div class="container">
    <div class="row">
        <div class="col-12 col-md-6"></div>
        <div class="col-12 col-md-6"></div>
    </div>
</div>

1 column layout stacked on mobile and 2 column layout on medium tablet screens and 4 column layout on large desktop screens.


<div class="container">
    <div class="row">
        <div class="col-12 col-md-6 col-lg-3"></div>
        <div class="col-12 col-md-6 col-lg-3"></div>
        <div class="col-12 col-md-6 col-lg-3"></div>
        <div class="col-12 col-md-6 col-lg-3"></div>
    </div>
</div>

Grid breakpoints

Class prefix	Grid breakpoints (px)	Breakpoint max width (px)
`xs`	0px	320px
`sm`	600px	601px
`md`	768px	769px
`lg`	1023px	1024px
`xl`	1199px	1200px

Markup: grid\grid.hbs

Copy

<section class="grid-example">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="inner">12</div>
            </div>
        </div>
        <div class="row">
            <div class="col-6">
                <div class="inner">6</div>
            </div>
            <div class="col-6">
                <div class="inner">6</div>
            </div>
        </div>
        <div class="row">
            <div class="col-4">
                <div class="inner">4</div>
            </div>
            <div class="col-4">
                <div class="inner">4</div>
            </div>
            <div class="col-4">
                <div class="inner">4</div>
            </div>
        </div>
        <div class="row">
            <div class="col-3">
                <div class="inner">3</div>
            </div>
            <div class="col-3">
                <div class="inner">3</div>
            </div>
            <div class="col-3">
                <div class="inner">3</div>
            </div>
            <div class="col-3">
                <div class="inner">3</div>
            </div>
        </div>
        <div class="row">
            <div class="col-2">
                <div class="inner">2</div>
            </div>
            <div class="col-2">
                <div class="inner">2</div>
            </div>
            <div class="col-2">
                <div class="inner">2</div>
            </div>
            <div class="col-2">
                <div class="inner">2</div>
            </div>
            <div class="col-2">
                <div class="inner">2</div>
            </div>
            <div class="col-2">
                <div class="inner">2</div>
            </div>
        </div>
        <div class="row">
            <div class="col-1">
                <div class="inner">1</div>
            </div>
            <div class="col-1">
                <div class="inner">1</div>
            </div>
            <div class="col-1">
                <div class="inner">1</div>
            </div>
            <div class="col-1">
                <div class="inner">1</div>
            </div>
            <div class="col-1">
                <div class="inner">1</div>
            </div>
            <div class="col-1">
                <div class="inner">1</div>
            </div>
            <div class="col-1">
                <div class="inner">1</div>
            </div>
            <div class="col-1">
                <div class="inner">1</div>
            </div>
            <div class="col-1">
                <div class="inner">1</div>
            </div>
            <div class="col-1">
                <div class="inner">1</div>
            </div>
            <div class="col-1">
                <div class="inner">1</div>
            </div>
            <div class="col-1">
                <div class="inner">1</div>
            </div>
        </div>
    </div>
</section>

Source: template/assets/scss/_grid.scss