A small number of utility classes are available that will allow you set any Easy Grid item to span multiple columns and/or rows. This enables you to take things a bit further and get more control than the stack settings themselves allow. The utility classes are added once to the page code regardless of how many Easy Grid stacks are added.
Important: The breakpoints at which the classes are applied are fixed and match Easy Grid's default breakpoint values of 600px (for medium), 900px for large and 1200px for extra large devices. As such it is recommended that your grids are set up using these breakpoints if using the utility classes.
Note: Using classes is an advanced option no additional support is available with their use. There is a downloadable project file available at the bottom of this page with a few worked examples of these classes in use.
Spans
The following class names can be added to any Easy Grid item to set it to span 1 or more columns and/or rows. To make the same grid item span different amounts on different devices add multiple class names accordingly (using the responsive modifiers).
| Description | Class name |
| Span all columns | span-all |
| Span 1 column | span-1 |
| Span 2 columns | span-2 |
| Span 3 columns | span-3 |
| Span 4 columns | span-4 |
| Span 5 columns | span-5 |
| Span 6 columns | span-6 |
| Span 1 row | span-1r |
| Span 2 rows | span-2r |
| Span 3 rows | span-3r |
| Span 4 rows | span-4r |
| Span 5 rows | span-5r |
| Span 6 rows | span-6r |
Spans - responsive modifiers
In addition, if you wish to apply different spans to larger devices then you can add in a modifier. For example, to set a medium+ device (>600px) to span 3 columns you would use the class span-m-3. Where the middle 'm' represents 'medium'. You can do the same with 'l' (large >900px) and 'xl' (x-large >1200px).
Note: If setting spans you should ensure that you have set there to be enough columns/rows in the grid to accomodate your choices.
To help keep track of what classes are being added to the grid items the class names are made visible in the Edit screen.
Downloadable project file
Here is a project file with a few worked examples of using several of these classes.
