react/

CodeMarkup

Grid item classNames

Grid item sizing

col-number is available as a class from one to twelve.

Example values

Grid shifts

shift-number is available as a class from one to twelve.

Example values

React Markup

import React, { Component } from 'react';

/* user imports */

class ExampleGrids extends Component {
    constructor(props) {
        super(props);

        this.state = {
            items: [
                { title: 'One' },
                { title: 'Two' },
                { title: 'Three' },
                { title: 'Four' },
                { title: 'Five' },
                { title: 'Six' },
                { title: 'Seven' },
                { title: 'Eight' },
                { title: 'Nine' },
                { title: 'Ten' },
                { title: 'Eleven' },
                { title: 'Twelve' }
            ]
        };
    }

    renderComponentOffer = items => {
        const { columnClass, shiftClass } = this.props;
        return items.map((d, i) => {
            return (
                <div
                    className={`grid-item-example ${columnClass} ${shiftClass}`}
                >
                    <div className="component-example-grid-item">
                        <div className="block-image">
                            <span className="offer-image" />
                        </div>
                        <div className="block-title">
                            <h3 className="offer-title">{d.title}</h3>
                        </div>
                    </div>
                </div>
            );
        });
    };

    render() {
        const { items } = this.state;
        return (
            <section className="section-example-grids">
                <div className="container-content">
                    <div className="block-header">
                        <h3 className="heading-header">Grids</h3>
                    </div>
                    <div className="grid-example">
                        {this.renderComponentOffer(items)}
                    </div>
                </div>
            </section>
        );
    }
}

export default ExampleGrids;
copy

styles/utils/_grid.scss

$mobile-grid: (
    columns: 4,
    gutter: 10px,
    media: $mobile
);

$tablet-p-grid: (
    columns: 4,
    gutter: 50px,
    media: $tablet-p
);

$tablet-l-grid: (
    columns: 12,
    gutter: 50px,
    media: $tablet-l
);

// Grid
.grid-container {
    @include grid-container;
}

.grid {
    max-width: $max-width;

    // Item
    > .grid-item {
        margin-bottom: 10px;

        // Grid Push
        &.push-one {
            @include grid-push(1);
        }

        &.push-two {
            @include grid-push(2);
        }

        &.push-three {
            @include grid-push(3);
        }

        &.push-four {
            @include grid-push(4);
        }

        &.push-five {
            @include grid-push(5);
        }

        &.push-six {
            @include grid-push(6);
        }

        &.push-seven {
            @include grid-push(7);
        }

        &.push-eight {
            @include grid-push(8);
        }

        &.push-nine {
            @include grid-push(9);
        }

        &.push-ten {
            @include grid-push(10);
        }

        &.push-eleven {
            @include grid-push(11);
        }

        &.push-twelve {
            @include grid-push(12);
        }

        // Grid Shifts
        &.shift-one {
            @include grid-shift(1);
        }

        &.shift-two {
            @include grid-shift(2);
        }

        &.shift-three {
            @include grid-shift(3);
        }

        &.shift-four {
            @include grid-shift(4);
        }

        &.shift-five {
            @include grid-shift(5);
        }

        &.shift-six {
            @include grid-shift(6);
        }

        &.shift-seven {
            @include grid-shift(7);
        }

        &.shift-eight {
            @include grid-shift(8);
        }

        &.shift-nine {
            @include grid-shift(9);
        }

        &.shift-ten {
            @include grid-shift(10);
        }

        &.shift-eleven {
            @include grid-shift(11);
        }

        &.shift-twelve {
            @include grid-shift(12);
        }

        // Grid Column

        @include grid-column(12);

        &.col-one {
            @include grid-column(1);
        }

        &.col-two {
            @include grid-column(2);
        }

        &.col-three {
            @include grid-column(3);
        }

        &.col-four {
            @include grid-column(4);
        }

        &.col-five {
            @include grid-column(5);
        }

        &.col-six {
            @include grid-column(6);
        }

        &.col-seven {
            @include grid-column(7);
        }

        &.col-eight {
            @include grid-column(8);
        }

        &.col-nine {
            @include grid-column(9);
        }

        &.col-ten {
            @include grid-column(10);
        }

        &.col-eleven {
            @include grid-column(11);
        }

        &.col-twelve {
            @include grid-column(12);
        }

        @include grid-media($mobile-grid) {
            @include grid-column(4);

            &.col-one,
            &.col-two,
            &.col-three,
            &.col-four,
            &.col-five,
            &.col-six,
            &.col-seven,
            &.col-eight,
            &.col-nine,
            &.col-ten,
            &.col-eleven,
            &.col-twelve {
                @include grid-column(4);
            }
        }
    }
}
copy