H1

H2

H3

H4

H5
H6

Subtitle L

Subtitle M

Comment

Body L

Body M
Body S
add text
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Grid System

Use this Grid for creating new layouts. You can combine this percentages with each other for creating uniq layouts.

20%
25%
33%
50%
67%
80%
100%

Common Grid Layouts

Structure of the Grid System:

Parent div block with class "Grid"
Children blocks with class "Grid Item". Each of this classes has predefine combo classes with percentage: 20, 25, 33, 50, 67, 80 and 100.

Main principle of this Grid is wrapping Grid Item to next line when it fills 100%. So, you can have in one line different combo layouts like: 50:50, 25:25:25:25, 33:33:33 etc.

If you struggling with combo classes you can read more about it.

20%
80%
100%
33%
33%
33%
33%
67%
80%
20%
25%
25%
25%
25%

Spacers System

Use this additional spaces if needed.
You can easily choose predefined space just input combo class that you need or create your own.

8px
12px
16px
20px
24px
32px
40px
48px
56px
64px
72px
80px
88px
96px
112px
128px
184px