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:
- 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.