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
Three unequal columns
Get three equal width coloumns with inbuilt padding. On mobile devices, the coloumns will automatically stack
Two unequal columns
Get 2 unequal width columns with inbuilt padding. On mobile devices, the coloumns will automatically stack
Full width, single column
No classes are necessary for full-width elements.Two columns with 2 nested column
Square boxes (Galleries)
Inside square boxes, the content can either be aligned in the middle or at the top.
.gallery-square-content-middle
.gallery-square-content-middle
Masonary Layouts
Create a masonary style layout from 2 to 9 tiles per column