How To Create Advanced Grids

Read full Core Framework documentation here.

Let's take a look at recent addition to Core, which are SPAN and START classes added to our CSS grid stack.

Core in default setup can create up to 6 columns, and all SPAN and START classes cover up to 6 columns / rows in the grid.

What do they do?

Basically, SPAN class can grow the cell to next columns / rows, and START class can change the order of cells in the grid.

Let's try out a quick example by creating 4 columns grid.

Add a div with c-columns-4, c-columns-gap-m, c-columns-m-2, c-columns-s-1 (4 columns on desktop, medium gap, 2 columns on M breakpoint and 1 column on S breakpoint )

HINT: You can use OxyNinja helpers to add 4 columns quickly.

Now, let's say we want the first cell to cover the size of two rows.

Select the cell and add c-row-span-2 - this class will span the cell into 2 rows. We add a few more divs to fill the rest of the grid.

Since our grid stacks to single column on S breakpoint (less than 768px), we want to fix the span on that breakpoint.

So we can add c-row-span-s-1 - this will change the cell size back to 1 row on S breakpoint.

Here's another example where we are spanning the column. Again we are starting from the 4 columns grid.

Select second cell and add c-col-span-2 and c-col-span-s-1 - to grow the cell to the size of 2 columns on desktop and less, and set it back to 1 column on S breakpoint where the grid stacks.

However, we also stack the layout to two columns on M breakpoint, which would leave some empty cells if not repositioned.

Since the middle spanned cell is highlighted, we may want to show it on a first position on phones. Let's add c-col-start-m-1 and c-row-start-m-1 - this class will move the cell to the #1 column and #1 row in the grid, on M breakpoint (less than 768px).

In the last example, we add both c-col-span-2 and c-row-span-2 to the second cell, and also all responsive classes from previous example, which gives us this nice grid layout.

Here are classes I used in the last example:

• Main:
• c-columns-4, c-columns-m-2, c-columns-s-1, c-columns-gap-m
• Spanned cell:
• c-col-span-2, c-row-span-2, c-col-span-s-1, c-col-start-m-1, c-row-start-m-1

Check this page on mobile to see how we reposioned columns using few classes from CORE framework.