Responsive Grids

I know, I know another Grid system, but bear with us, this one is pretty cool and we have been using it on all our large scale projects at Beyond for the last few years and thought it was time to share.

12 Column grid example

A basic 12 column example

1 of 1

1 of 2

1 of 3

1 of 4

8 of 12

4 of 12

9 of 12

3 of 12

SCSS


@include rg-create-grid(
    $grid-class: "grid-fullwidth",
    $width: 1280px,
    $gutter: 20px,
    $margin: 24px,
    $columns: 12,
    $breakpoint: "tablet"
);

HTML


<div class="grid-fullwidth">
    <div class="col-1-1">1 of 1</div>
    <div class="col-1-2">1 of 2</div>
    <div class="col-1-2">1 of 2</div>
    <div class="col-1-3">1 of 3</div>
    <div class="col-1-3">1 of 3</div>
    <div class="col-1-3">1 of 3</div>
    <div class="col-1-4">1 of 4</div>
    <div class="col-1-4">1 of 4</div>
    <div class="col-1-4">1 of 4</div>
    <div class="col-1-4">1 of 4</div>
    <div class="col-8-12">8 of 12</div>
    <div class="col-4-12">4 of 12</div>
    <div class="col-9-12">9 of 12</div>
    <div class="col-3-12">3 of 12</div>
</div>

Custom grid example

A custom grid allows you handcraft exactly how each column will behave across the different breakpoints.

Custom 1

Custom 2

Custom 3

Custom 4

Custom 5

Custom 6

SCSS


@include rg-create-grid(
    $grid-class:    "grid-custom",
    $width:         1280px,
    $gutter:        20px,
    $margin:        24px,
    $column-class:  "grid-custom__col",
    $breakpoint:    ((tablet         2)
                    (smalldesktop    3)
                    (desktop         4)
                    (largedesktop    6))
);

HTML


<div class="grid-custom">
    <div class="grid-custom__col">Custom 1</div>
    <div class="grid-custom__col">Custom 2</div>
    <div class="grid-custom__col">Custom 3</div>
    <div class="grid-custom__col">Custom 4</div>
    <div class="grid-custom__col">Custom 5</div>
    <div class="grid-custom__col">Custom 6</div>
</div>

Single column content example

This example shows how we can use a 'no-cols' class to avoid needing to wrap the content in a div 'col-1-1' class when the content spans one single column.

Full width content example

SCSS


@include rg-create-grid(
    $grid-class: "grid-fullwidth",
    $width: 1280px,
    $gutter: 20px,
    $margin: 24px,
    $columns: 12,
    $breakpoint: "tablet"
);

HTML


<div class="grid-fullwidth no-cols">
    <p>Example full width content</p>
</div>

Full bleed 4 Column grid example with no gutters or margins

A 12 column example with the gutters and margins removed

1 of 1

1 of 2

1 of 3

1 of 4

SCSS


@include rg-create-grid(
    $grid-class: "grid-nogaps",
    $width: 1280px,
    $gutter: 0px,
    $margin: 0px,
    $columns: 4,
    $breakpoint: "tablet"
);

HTML


<div class="grid-nogaps">
    <div class="col-1-1">1 of 1</div>
    <div class="col-1-2">1 of 2</div>
    <div class="col-1-2">1 of 2</div>
    <div class="col-1-3">1 of 3</div>
    <div class="col-1-3">1 of 3</div>
    <div class="col-1-3">1 of 3</div>
    <div class="col-1-4">1 of 4</div>
    <div class="col-1-4">1 of 4</div>
    <div class="col-1-4">1 of 4</div>
    <div class="col-1-4">1 of 4</div>
</div>

Custom align the columns

An 8 column example with alternate width, margin and gutters plus custom alignment

1 of 1

1 of 2

1 of 8

1 of 3

1 of 4

6 of 8

SCSS


@include rg-create-grid(
    $grid-class: "grid-smaller",
    $width: 1000px,
    $gutter: 30px,
    $margin: 12px,
    $columns: 8,
    $breakpoint: "smalldesktop"
);

HTML


<div class="grid-smaller">
    <div class="col-1-1">1 of 1</div>
</div>
<div class="grid-smaller">
    <div class="col-1-2">1 of 2</div>
    <div class="col-1-2">1 of 2</div>
</div>
<div class="grid-smaller">
    <div class="col-6-8">1 of 2</div>
    <div class="col-1-8 a-r">1 of 8</div>
</div>
<div class="grid-smaller">
    <div class="col-1-1">1 of 3</div>
</div>
<div class="grid-smaller">
    <div class="col-1-4 a-c">1 of 4</div>
</div>
<div class="grid-smaller">
    <div class="col-6-8 a-r">6 of 8</div>
</div>