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.

The Basics

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:

Icons showing the available breakpoints.

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

The columns have collapsed to two on the L breakpoint.

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.

Breakpoints setup in Core Framework

Breakpoints setup in Oxygen Builder

Row Span

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:

First element spanning 2 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:

How our example looks on the L breakpoint

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.

With the new class added, you can see the first column now spans only 1 row on the L breakpoint.

Col Span

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:

Here is an element with 4 columns and 2 rows.

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:

The second element is now spanning across 2 columns

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:

The second element is now spanning 2 columns and 2 rows

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:

An undesirable layout on the L breakpoint

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

We have fixed the layout with complete ease.

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.