Grid
A fully responsive grid system with ultimate control to get the layout you need.
Example Layouts
Just some examples of the various layouts you can achieve. Note that all columns are full width on mobile so make sure to check it out on desktop, tablet and mobile to experience the responsiveness.
1/1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisi lacus sed viverra tellus. Eget aliquet nibh praesent tristique magna sit amet purus gravida. Et pharetra pharetra massa massa ultricies mi quis hendrerit.
1/2
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisi lacus sed viverra tellus. Eget aliquet nibh praesent tristique magna sit amet purus gravida. Et pharetra pharetra massa massa ultricies mi quis hendrerit.
1/2
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisi lacus sed viverra tellus. Eget aliquet nibh praesent tristique magna sit amet purus gravida. Et pharetra pharetra massa massa ultricies mi quis hendrerit.
1/3
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisi lacus sed viverra tellus.
1/3
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisi lacus sed viverra tellus.
1/3
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisi lacus sed viverra tellus.
1/4
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisi lacus sed viverra tellus.
1/4
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisi lacus sed viverra tellus.
1/4
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisi lacus sed viverra tellus.
1/4
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisi lacus sed viverra tellus.
1/6
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
1/6
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
1/6
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
1/6
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
1/6
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
1/6
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
1/3
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
2/3
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisi lacus sed viverra tellus. Eget aliquet nibh praesent tristique magna sit amet purus gravida. Et pharetra pharetra massa massa ultricies mi quis hendrerit.
3/4
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisi lacus sed viverra tellus. Eget aliquet nibh praesent tristique magna sit amet purus gravida. Et pharetra pharetra massa massa ultricies mi quis hendrerit.
1/4
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Block Settings
| Grid Options | Value |
| Spacing: | Margin/Padding Presets |
| Animation: | 77+ Effects |
| Additional CSS Class: | Class Name |
| Row Options | Value |
| Gutters: | Yes, No |
| Equal Height: | Yes, No |
| No. of Columns: | 1-12 |
| Background Color: | Theme Colors, Custom Color |
| Spacing: | Margin/Padding Presets |
| Animation: | 77+ Effects |
| Additional CSS Class: | Class Name |
| Column Options | Value |
| Size: | Not Set, Equal, Variable, 1-12 |
| Small Screen Size: | Not Set, Equal, Variable, 1-12 |
| Medium Screen Size: | Not Set, Equal, Variable, 1-12 |
| Large Screen Size: | Not Set, Equal, Variable, 1-12 |
| Extra Large Screen Size: | Not Set, Equal, Variable, 1-12 |
| Background Color: | Theme Colors, Custom Color |
| Spacing: | Margin/Padding Presets |
| Animation: | 77+ Effects |
| Additional CSS Class: | Class Name |