Grid Ultimo Theme

6. Theme features and elements

6.4 Grid system

ultimo theme – User Guide


2 columns (When developing the grid, you can also temporarily add class show-grid to visualize the grid (like in the above example).)

Sample text...
Sample text...

3 columns

Sample text...
Sample text...
Sample text...

4 columns

Sample text...
Sample text...
Sample text...
Sample text...

3 columns (not equal)

Sample text...
Sample text...
Sample text...

To create multiple rows of columns simply add more units to the container:

Sample text...
Sample text...
Sample text...
Sample text...
Sample text...

To add even vertical spaces between rows, replace classgrid-container with class grid-container-spaced:

Sample text...
Sample text...
Sample text...
Sample text...
Sample text...

Grid on mobile devices

The following example will create 4 equal columns:

Sample text...
Sample text...
Sample text...
Sample text...