Summary of Changes

Currently most module position uses a 4 column CSS grid. This PR creates the following 2 groups of CSS grid modifier classes allowing users to extend individual module widths and heights across tracks within the grid. Only one class from each group to be added.

Width

• span-col-2 - Span module across 2 columns (50%)
• span-col-3 - Span module across 3 columns (75%)
• span-col-4 - Span module across 4 columns (100%)

Height

• span-row-2 - Span module across 2 rows
• span-row-3 - Span module across 3 rows
• span-row-4 - Span module across 4 rows

span-row-# classes will only expand the height of a module if a row exists for the module to expand in to. By default only one row exists. New rows are created when modules can not be contained in a single row and therefore wrap to a second (implicit grid). If a module wraps to a second row, the module will span the available width regardless of any span-col-# due to the set minmax function. span-row-# classes only extend down presuming the row exists.

I am not sure if we want more than 4 columns in the grid? 4 is minimal however I would say is enough for most situations. More columns can be easily added. Naming of the classes can also be changed if someone can suggest a better alternative?

Using classes means we are not tying Joomla to a grid size which was the case for the previous bootstrap field. Grid size is now solely set by the template in both grid size and the classes available.

Testing

Apply PR and add at most one class from each group to the 'Module Class' field of a module in the top-a, top-b, bottom-a or bottom-b module positions.

Browser Support

We should have support for CSS grid in IE Edge in the near future. Included is a flex fallback for IE11 (currently inc. Edge) for the following classes only..

• span-col-2
• span-col-3
• span-col-4

Without support for CSS grid, I can see no option to add support for the span-row-# classes in IE11.

Documentation Changes Required

Yes

Examples

span-col-2 (blue)

span-col-3 (blue)

span-col-2 span-row-2 (blue)

span-row-2 (blue)

span-col-3 span-row-3 (blue)

span-col-4 (blue)