The template is responsible of the design of your website and in many cases you will need to do some design also in your content, like creating some columns to align your content.

You can use some CSS Framework like Bootstrap, but if you don't want to load a such framework then it becomes very difficult to manage the layout arrangement. Hopefully Template Creator CK comes now with a simple and flexible CSS grid than you can use into your projects.

How does it work - How to create the columns

Here is a simple example on how to create a 2 columns design in your content. Just write this code in your editor (in html mode)

If you check the demo, you will see that the columns adapts to the content and they don't stay everywhere at 25%. This is a natural behavior that you can use like this. Else if you want to force the columns to always keep the same width, you can then use the CSS class "tck-cols-X" where X is the number of columns.

Here is the list of available columns numbers : tck-cols-2, tck-cols-3, tck-cols-4, tck-cols-8

Demo with tck-cols-4 (4 columns of 25%) :

My first column here

My second column here

My third column here

My fourth column here

How to make it responsive

Template Creator CK includes 5 resolutions. Each resolution has a CSS class that you can use to stack the columns vertically :

computer : tck-stack-5

tablet landscape : tck-stack-4

tablet portrait : tck-stack-3

phone landscape : tck-stack-2

phone portrait : tck-stack-1

The resolutions are set according to the values that you have put into the responsive design interface into Template Creator CK.

Example with a 2 columns layout that you want to stack from tablet portrait (resolution N° 3) :

This works in combination with any other situation that you can see above.

Demo :

My first column here

My second column here

How to give custom widths to my columns

The basic behavior is that all your columns will have the same width automatically. Now if you want to create a custom layout, you can also do it. Let's see how to create a 1/4 - 3/4 layout with 2 columns :

Just give your width on each column, and you can create the layout like you want. Note that you can use some additional CSS classes (that you have to write in your custom css) to set the width on your columns if you don't want to put it in the code.

You can also make them responsive in the same way as explained above.

Demo :

My first column here

My second column here

How to set a gutter of 10px between my columns

By default the Template Creator CK CSS grid includes the ability to have a gutter of 10px (space between your columns). This is a bit more complicated because it needs to know how much columns do you want to use. Here is an example of 3 columns and the 10px gutter :

Here is the list of available columns numbers : tck-cols-2, tck-cols-3, tck-cols-4, tck-cols-8

Demo :

My first column here

My second column here

My third column here

How to set a custom gutter between my columns

Ok great, we know how to use a 10px gutter. That's quite easy, but what if I want to use another gutter value ? (yes for sure, you have already asked yourself about this, right ?). You can do it, but it requires a bit more calculation and CSS code. Imagine that you want to have a 2 columns layout, with a gutter of 20px between the columns. Here is an example of code :

Here you must note that you have to multiply the gutter value : 2 * 10px. If you have 3 columns, you shall agree that you will have 2 gutters of 20px. In general, nb_gutters = nb_cols - 1.

Demo :

My first column here

My second column here

My third column here

Do it more flexible for your projects - Create your own CSS classes

Do you want to write this CSS code inline for each column ? No ...

If you want a specific value for your columns or gutter, you can write your custom CSS classes and use them in the grid system. For example to create our 3 columns with the 20px gutter, you can write this code in Parameters >> Custom CSS

That's it, you will be able to reuse your custom layout everywhere in your website.

Fixed width - Fluid width, next step ?

Are you ready to continue ? May be that you have not read the whole article until now, or may be that you need a cup of coffee before continuing ? :)

Imagine that you want to have 2 columns but, one fixed with an image and one fluid with a text. When reducing the screen size the image shall not resize and always looks the same, and the text shall adapt to the rest of the space. This is also possible.

Example of code with a fixed column of 250px, and then the other column that adapts itself to fill the row (for the fun, let's also add a gutter of 10px) :

The seond column will take the row space minus the 260px : 250px of the 1st column + 10px of gutter. That's it.

Demo :

My first FIXED column here

My second FLUID column here

Why shall I use this CSS grid

We have now seen a lot of examples of what you can do with the CSS grid system included into Template Creator CK. You can do many things and adapt it to your needs for each template.

You may ask why to use a such grid comparing of the ones delivered by Bootstrap and other CSS frameworks. I have no answer for this, you can use what you want in your website. I have added this feature to help you to manage your layout and to offer many possibilities to create your columns. This grid will be continuously supported in the next versions of Template Creator CK, taking also care about the Backward Compatibility for your projects.