Grid

Basic grid

PrimoCSS includes a responsive mobile fluid flex-box grid that scales up to 12 columns or can be changed via the SCSS variable $grid-max-columns. Use .grid-row to create horizontal groups of columns and all content should be placed within columns.

The predefined classes give any project the flexibility to create any layout required as well as screen specific classes. Setting .grid-md-col-6 will set the width for min-width of medium screens. Grid styles can be found in _layout.grid.scss.

Example
<div class="grid-row">
    <div class="grid-md-col-6">...</div>
    <div class="grid-md-col-6">...</div>
</div>

In-conjunction with the .grid-row adding various modifies such as .grid-row--middle modifier will vertically centre any content. Other modifier classes are .grid-row--start, .grid-row--center, .grid-row--end, .grid-row--top, .grid-row--top, .grid-row--bottom. These all use either justify-content or align-items in conjunction with flex. Styles can be found in _tools.flex-modifiers.

Example
<div class="grid-row grid-row--start">...</div>
<div class="grid-row grid-row--center">...</div>
<div class="grid-row grid-row--end">...</div>
<div class="grid-row grid-row--top">...</div>
<div class="grid-row grid-row--middle">...</div>
<div class="grid-row grid-row--bottom">...</div>

Offset classes

Creates an offset left margin to mimic column space between itself and another grid element.

Example
<div class="grid-row">
    <div class="grid-col-5 offset-col-7">
    ...
    </div>
</div>

Nesting grids

Grid has the ability to nest grids with inside any column. Repeat a .grid-row and a new 12 column grid can be made.

Example
<div class="grid-row">
    <div class="grid-col-12">
        <div class="grid-row">
            <div class="grid-col-6">
                ...
            </div>
            <div class="grid-col-6">
                ...
            </div>
        </div>
    </div>
</div>

No gutters

Applying the class .grid-row--no-gutter and .grid-col-12--no-gutter will remove margins from the row and all columns.

Example
<div class="grid-row grid-row--no-gutter">
    <div class="grid-col-12--no-gutter">
        ...
    </div>
</div>

Related content