Introduction to grid and offset

Thedm-class

Simplecss uses a 12 column fluid css grid system, where each column are called gr <=> grid, followed by the column dimension : dm-x where x is in [0...12]. Below a size of 960px all colums are aligned to fill the dimension that you are assigned to their. for example dm-6 means a fluid column with a half size of parent div.
To give an offset to the columns, just use offset-x class.
note:for small devices (below 632px) you can use ds-x class

Example:

.dm-1
.dm-2
.dm-3
.dm-4
.dm-5
.dm-6
.dm-7
.dm-8
.dm-9
.dm-10
.dm-11
.dm-12
.dm-6
.dm-6
.dm-1
.dm-1
.dm-1
.dm-1
.dm-1
.dm-1
.dm-1
.dm-1
.dm-1
.dm-1
.dm-1
.dm-1

Note

you can enter the board using the class.border

Theds-class

The elements with the class.ds-resize under 632px

.ds-1
.ds-2
.ds-3
.ds-4
.ds-5
.ds-6
.ds-7
.ds-8
.ds-9
.ds-10
.ds-11
.ds-12

The offset- class

Through the class .offset[1-12] you can move to the right elements with respect to the father, this is done by setting a margin-left percentage in the mobile version margin is removed.

Example:

.offset-1
.offset-2
.offset-3
.offset-4
.offset-5
.offset-6
.offset-7
.offset-8
.offset-9
.offset-10
.offset-11

Theperc-class

If you want the class size.dm or .dsremain the same in the mobile version just add the class.perc

.dm-6
.dm-6