gistfile1.scss

$tabletwidth: 40em;
$smalldesktopwidth: 60em;

$grids: 4;
$grids: add-grid(9 at $tabletwidth);
$grids: add-grid(12 at $smalldesktopwidth);

$gutters: 1/3;
$gutters: add-gutter(1/2 at $tabletwidth);
$gutters: add-gutter(1/2 at $smalldesktopwidth);

.element {
        @include breakpoint($tabletwidth) {
            margin-bottom: 1em;
            &:nth-of-type(3n+1) {
                @include grid-span(3, 1);
                clear: both;
            }
            &:nth-of-type(3n+2) {
                @include grid-span(3, 4);
            }
            &:nth-of-type(3n+3) {
                @include grid-span(3, 7);
            }
        }
        @include breakpoint($smalldesktopwidth) {
            margin-bottom: 1em;
            &:nth-of-type(4n+1) {
                @include grid-span(3, 1);
                clear: both;
            }
            &:nth-of-type(4n+2) {
                @include grid-span(3, 4);
            }
            &:nth-of-type(4n+3) {
                @include grid-span(3, 7);
            }
            &:nth-of-type(4n+4) {
                @include grid-span(3, 10);
            }
        }
}