This version of the documentation is outdated. Check the latest version here!

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.

Three columns with the same size
<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.

Fix width grid
<div class="mbsc-grid-fixed">
    <div class="mbsc-row">
        <div class="mbsc-col">
            This grid has a fixed width
        </div>
    </div>
</div>
Extra small (<576px) Small (>=576px) Medium (>=768px) Large (>=992px) Extra large (>=1200px)
Max container width auto 540px 720px 960px 1140px
Class prefix .col- .col-sm- .col-md- .col-lg- .col-xl-
Number of columns 12
Gutter width 2em (1em on each side of the column)
Column ordering Yes

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.

Equal-width columns
mbsc-col (1 of 3)
mbsc-col (1 of 3)
mbsc-col (1 of 3)
mbsc-col (1 of 5)
mbsc-col (1 of 5)
mbsc-col (1 of 5)
mbsc-col (1 of 5)
mbsc-col (1 of 5)
mbsc-col (1 of 10)
mbsc-col (1 of 10)
mbsc-col (1 of 10)
mbsc-col (1 of 10)
mbsc-col (1 of 10)
mbsc-col (1 of 10)
mbsc-col (1 of 10)
mbsc-col (1 of 10)
mbsc-col (1 of 10)
mbsc-col (1 of 10)

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.

Specified column widths for all screen sizes
mbsc-col-1
mbsc-col-11
mbsc-col-2
mbsc-col-10
mbsc-col-3
mbsc-col-9
mbsc-col-4
mbsc-col-8
mbsc-col-5
mbsc-col-7
mbsc-col-6
mbsc-col-6
mbsc-col-12

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.

Try this example with different screen sizes.
Specified column widths for all screen sizes
mbsc-col-sm-4
mbsc-col-sm-8
mbsc-col-md-3
mbsc-col-md-7
mbsc-col-md-2
mbsc-col-lg-3
mbsc-col-lg-4
mbsc-col-lg-5
mbsc-col-xl-6
mbsc-col-xl-6
Specified column widths for all screen sizes
Column 1
Column 2
Column 3

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.

Setting one column width
mbsc-col-2
mbsc-col
mbsc-col
mbsc-col
mbsc-col
mbsc-col-7
mbsc-col
mbsc-col
mbsc-col-10

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.

Variable width content
mbsc-col
mbsc-col-sm-auto example
mbsc-col
mbsc-col
mbsc-col-sm-auto another example

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.

Columns vertically aligned to the 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.

Columns horizontally aligned to center
<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}.

Offsetting columns
<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.

Using push and pull
<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.

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