Grid System
With Core Framework's default preset, we have set up a convenient way for you to use CSS grid on your websites. Take full control and manipulate it in many ways across different devices.
Last updated
With Core Framework's default preset, we have set up a convenient way for you to use CSS grid on your websites. Take full control and manipulate it in many ways across different devices.
Last updated
By default, on all breakpoints, we have added numerous classes which you can use to create your CSS grids. As for the amount of columns you can have, by default, we have added 8 which are as follows:
.column
.columns-2
.columns-3
.columns-4
.columns-5
.columns-6
.columns-7
.columns-8
Here is a basic example, a container <div> with 6 elements inside of it. To display this as 3 columns, we can simply apply the .columns-3 class. (The full class list to achieve the result as in the screenshot is as follows: .columns-3, .gap-m, .full-width).
Next, let's say we want this to collapse to two columns on the tablet device, and then to one column on smartphones. First, let's take a look at the breakpoints available to us:
For quick reference, from right to left <- remember it like this: Small (s), Medium (m), Large (l), Extra Large (xl), All Breakpoints. This is important because it will help you remember which breakpoint is which when adding classes.
We have conveniently added suffixes to our classes for easy memorization. These are:
--on-s
--on-m
--on-l
--on-xl
So, to continue with the above scenario, we now know that we want the columns to break down to two on the tablet (Large) and then one column on smartphones (Small). So, let's add the following classes: .columns-2--on-l, .column--on-s
As you can see, we are simply adding new classes with their respective suffix so that we can manipulate the elements on different breakpoints.
Please note that when adding your breakpoints in Core Framework, it is important that the values of max-width match how they're set up in your builder as well.
Next, let's say we want to span an element across two rows. This is as easy as adding a class to the element you would like to span.
Taking the above example, let's span the first element across both rows:
To achieve this, simply add the .row-span-2 class to the element you would like to span.
You may need to add a height of 100% to the element so that it spans the whole height.
Remember, on the tablet devices (L breakpoint), we may need to fix this up a little since in our previous example we made it become 2 columns. Currently, here is how it looks:
Let's say we want to set it back to default (no spanning) on tablets and below. We can simply add a new class to our first column. In this case, let's add the .row-span-1--on-l class. We are once again using the suffixes here.
This works just like the row span. We can add classes to the elements that we wish to span on columns. Let's set a new base example using 4 columns on all breakpoints:
Now, let's imagine we would like the element labelled "2" to span across 2 columns, then we can simply add the .col-span-2 to the element:
Now, let's go one step further and make the same element span across 2 rows as well. We can add the same class as in the previous section; .row-span-2 to the same element:
On the L breakpoint, you will notice an issue. Since we are collapsing to 2 columns on the L breakpoint, this is how it looks:
To fix this, we can add some classes for the L breakpoint. In essence, we will simply reset that element for the large breakpoint.
Let's add the following classes to the element: .col-span-1--on-l and .row-span-1--on-l
As you can see, we are making the element span only 1 on both column and row, and by using the --on-l suffix, this applies to the L breakpoint and lower.
