Grid system

# Containers

The containers are optional in Mate, rows and columns can operate without them.

Available containers classes:

.box - Size of container is fixed to max-width configured id settings.scss ($page__width--maxsize)
.box--fluid - 100% width of container
.box--flex - Container based on flex-box. This class is typicaly used to wrap items (columns), not rows.

.col-6

# Basic grid

In Mate default grid consists of 12 columns, but you can change this number in the settings file settings.scss

.col-1

.col-11

.col-2

.col-10

.col-3

.col-9

.col-4

.col-8

.col-5

.col-7

.col-6

.col-7

.col-5

.col-8

.col-4

.col-9

.col-3

.col-10

.col-2

.col-11

.col-1

.col-12

.col-4

.col-6

# Nesting columns

Level 1: .col-12

Level 2: .col-6

# Offseting columns

You can use offsetting for specified device by using classes dedicated to mediums, example .col--*-offset-3, where * is one of mediums (phone, tablet, mobile, desktop, desktop-xl).

.col-4 .col--offset-4

.col-4

.col-4 .col--offset-4

.col-6 .col--offset-6

Reset offseting

To reset offset use these classes:

.col--phone-offset-0
.col--tablet-offset-0
.col--mobile-offset-0
.col--desktop-offset-0
.col--desktop-xl-offset-0

# RWD

Desktop + Phone

.col-4 .col-12--phone

.col-4 .col-6--phone

Desktop + Tablet

.col-12 .col-6--tablet

.col-6 .col-6--tablet

.col-6 .col-12--tablet

Desktop + Tablet + Phone

.col-12 .col-6--tablet .col-12--phone

.col-6 .col-6--tablet .col-12--phone

.col-6 .col-12--mobile

# Grid helpers

General

If you need extra space from the bottom of box, row or col, just use these classes depending od device:

.grid-add-gutter-bottom
.grid-phone-add-gutter-bottom
.grid-tablet-add-gutter-bottom
.grid-mobile-add-gutter-bottom
.grid-desktop-add-gutter-bottom
.grid-desktop-xl-add-gutter-bottom

In addition there is an extra mixin to generate bottom gutter in custom place:

with custom size: @include grid-add-bottom-gutter($grid__row--gutter*3)
or default size: @include grid-add-bottom-gutter

Rows

.row--no-gutter - Reset gutters (zero margins)

Columns

.col--no-gutter - Reset gutters (zero paddings)

# Native CSS multi columns

You can use this technique to achieve well-known masonry effect or simple columns for different use case.

There is 12 columns by default like in grid system, so you can use classes from .masonry-1 to .masonry-12.
For RWD needs just add modifier class like in grid system --phone, --tablet, --mobile to achieve the class like .masonry-1--phone and so on.

Additional classes:
.masonry--bordered - add vertical border between columns
.masonry-span - add to element inside masonry container which should not be divided

Example: