The nifty
Grid
Based on 12 columns
Do practically anything!
1
1
1
1
1
1
1
1
1
1
1
1
2
2
2
2
2
2
4
4
4
6
6
12
6
3
2
1
div.grid.columns-2 .column .column
Example for 2 columns
Simply add the .columns-2 class on the grid div. Or use any other number between 1 and 12.
div.grid .column-3 .column-2 .column-7
Variable columns
This is the most common way to add columns. Note: When you add columns worth more than 12, it will break the grid.
div.grid .column-desktop-3.column-tablet-6.column-mobile-6 .column-desktop-3.column-tablet-6.column-mobile-6 .column-desktop-3.column-tablet-6.column-mobile-6 .column-desktop-3.column-tablet-6.column-mobile-6
Responsiveness
By default, the grid is responsive in its own way. To take full control over your layout and decide your own grid behavior, use these handy responsive classes. The example shown has 4 columns on desktop and 2 on 2 rows on tablet and mobile.
ThemeVillain is always striving for the best possible quality for its templates and themes. If you encounter bugs or need something special done with your template, please contact support@themevillain.com.