ID's

Layouts

Styles layout examples

Basic grid layouts to get you started with building within the Styles grid system.

In these examples .themed-layout class is added to the columns to add some themings. This is not a class avaiable in Styles by default.

Four layout tiers

All devices including Mobile, tablet, mini desktop, desktop
.span-1-of-3-inside
.span-1-of-3-inside
.span-1-of-3-last-inside
.span-1-of-3-inside-tablet
.span-1-of-3-inside-tablet
.span-1-of-3-last-inside-tablet
.span-1-of-3-inside-minidesktop
.span-1-of-3-inside-mini-desktop
.span-1-of-3-last-inside-minidesktop
.span-1-of-3-inside-desktop
.span-1-of-3-inside-desktop
.span-1-of-3-last-inside-desktop

Three equal columns with spacing

Get three equal width coloumns with inbuilt padding. On mobile devices, the coloumns will automatically stack

.span-1-of-3-tablet
.span-1-of-3-tablet
.span-1-of-3-last-tablet

Three unequal columns

Get three equal width coloumns with inbuilt padding. On mobile devices, the coloumns will automatically stack

.span-1-of-5-tablet
.span-3-of-5-tablet
.span-1-of-5-last-tablet

Two unequal columns

Get 2 unequal width columns with inbuilt padding. On mobile devices, the coloumns will automatically stack

.span-6-of-8-tablet
.span-2-of-8-last-tablet
.span-2-of-8-tablet
.span-6-of-8-last-tablet

Full width, single column

No classes are necessary for full-width elements.

Two columns with 2 nested column

.span-6-of-8
.span-1-of-2-inside
.span-1-of-2-last-inside
.span-2-of-8-last-last-inside

Square boxes (Galleries)

Inside square boxes, the content can either be aligned in the middle or at the top.

.gallery-6-square-tablet .gallery-2-square-sm
.gallery-square-content-middle
.gallery-8-square-tablet
.gallery-square-content-middle

Masonary Layouts

Create a masonary style layout from 2 to 9 tiles per column

.mason-item mason-item-4-tablet
.mason-item mason-item-4-tablet
.mason-item mason-item-4-tablet
.mason-item mason-item-4-tablet
.mason-item mason-item-4-tablet
.mason-item mason-item-4-tablet
.mason-item mason-item-4-tablet
.mason-item mason-item-4-tablet
.mason-item mason-item-4-tablet
.mason-item mason-item-4-tablet