Grid Layout

About

The Mobiscroll Grid Layout is a powerful flexbox system for building custom layouts of all shapes and sizes.

Basic usage

The grid is combined from the following units: grid, rows and columns. It has a twelve column layout with different breakpoints depending on the size of the screen or the predefined CSS class.

<div class="mbsc-grid">
    <div class="mbsc-row">
        <div class="mbsc-col">
            One of three columns
        </div>
        <div class="mbsc-col">
            One of three columns
        </div>
        <div class="mbsc-col">
            One of three columns
        </div>
    </div>
</div>

For many more examples - simple and complex use-cases - check out the grid-layout demos for javascript.

Grid size

By default the grid has full width and with the .mbsc-grid-fixed class the layout will have a max width based on the screen size.

<div class="mbsc-grid-fixed">
    <div class="mbsc-row">
        <div class="mbsc-col">
            This grid has a fixed width
        </div>
    </div>
</div>

Column sizing

Column classes specify the number of columns out of the possible 12 per row. See the grids below illustrating the column classes.

Equal-width

With .mbsc-col class, each column will be the same width inside of a row for every device and viewport.

Specified column sizes

Specifying a numbered class will adjust columns to take up x columns out of the available columns. Using the .mbsc-col-{size} class will set the column width for all devices and screens.

Responsive classes

Using the .mbsc-col-{breakpoint}-{size} classes, the column widths will adapt to the screen size based on the predefined classes and become horizontal at the specified breakpoint.

Setting one column width

Using our predefined classes, it's possible to set the width of one column and have the remaining columns automatically resize around it.

Variable-width

With the .mbsc-col-{breakpoint}-auto attributes, the columns are sized based on the natural width of its content. The adjacent columns will resize to fill the row.

Alignment

Vertical alignment

All columns can be vertically aligned inside of a row by adding different attributes to the row. Classes: .mbsc-align-items-start, .mbsc-align-items-center, .mbsc-align-items-end.

<div class="mbsc-grid">
    <div class="mbsc-row mbsc-align-items-end">
        <div class="mbsc-col">
            First column
        </div>
        <div class="mbsc-col">
            Second column
        </div>
    </div>
</div>

Horizontal alignment

All columns can be horizontally aligned inside of a row by adding different attributes to the row. Classes: .mbsc-justify-content-start, .mbsc-justify-content-center, .mbsc-justify-content-end, .mbsc-justify-content-around, .mbsc-justify-content-between.

<div class="mbsc-grid">
    <div class="mbsc-row mbsc-justify-content-center">
        <div class="mbsc-col-4">
            First column
        </div>
        <div class="mbsc-col-4">
            Second column
        </div>
    </div>
</div>

Offseting columns

Offset classes are used to increase the left margin of a column by x columns. Classes: .mbsc-offset-{size}, .mbsc-offset-{breakpoint}-{size}.

<div class="mbsc-grid">
    <div class="mbsc-row">
        <div class="mbsc-col-4">
            Col 4
        </div>
        <div class="mbsc-col-md-3  mbsc-offset-md-3">
            This column's margin left is increased by 3 columns
        </div>
    </div>
</div>

Push and pull

It's possible to change the order of the grid columns with the push and pull attributes: .mbsc-push-{breakpoint}-{size}, .mbsc-pull-{breakpoint}-{size}. These attributes adjust the left and right of the columns by x columns making it easy to reorder them.

<div class="mbsc-grid">
    <div class="mbsc-row">
        <div class="mbsc-col-5 mbsc-push-sm-7">
            This column is the first on large screen
        </div>
        <div class="mbsc-col-7 mbsc-pull-sm-5">
            This column is the first on small (<576px) screen
        </div>
    </div>
</div>

No padding

The columns initially have right and left padding which can be removed with the mbsc-no-padding class.

<div class="mbsc-grid mbsc-no-padding">
    <div class="mbsc-row">
        <div class="mbsc-col-sm">
            This column has no padding
        </div>
    </div>
</div>