CSS grid to use in your content

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)

<div class="tck-cols">
    <div>My first column here</div>
    <div>My second column here</div>
</div>

That's it, nothing more to do ! If you want to create more columns, just add them in the code. For example now 4 columns

<div class="tck-cols">
    <div>My first column here</div>
    <div>My second column here</div>
    <div>My third column here</div>
    <div>My fourth column here</div>
</div>

In this case, all the columns will have the same width.

Demo :

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%) :

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

<div class="tck-cols tck-stack-3">
    <div>My first column here</div>
    <div>My second column here</div>
</div>

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

Demo :

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 :

<div class="tck-cols">
    <div style="width:25%;">My first column here</div>
    <div style="width:75%">My second column here</div>
</div>

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 :

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 :

<div class="tck-cols-3 tck-gutter-10">
    <div>My first column here</div>
    <div>My second column here</div>
    <div>My third column here</div>
</div>

• tck-cols-3 : tells the system that you want to use 3 columns
• tck-gutter-10 : tells the system that you want a gutter of 10px

There is only a 10px gutter available this way.

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

Demo :

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 :

<div class="tck-cols tck-gutter">
    <div style="width:calc((100% - 20px) / 2);">My first column here</div>
    <div style="width:calc((100% - 20px) / 2)">My second column here</div>
</div>

Do you need some explanations ?

• use the "calc" CSS function to automatically calculate the correct dimensions. Here you can use % and px in the same equation.
• 100% :  is the value of the full row that contains your 2 columns
• -20px :  is the gutter value
• / 2 : you must then divide your row in 2 columns
• use the "tck-gutter" css class to tell the system that you want your columns to allow the space bewteen them

Here is a more complex example when using 3 columns and a 20px gutter :

<div class="tck-cols tck-gutter">
    <div style="width:calc((100% - 2 * 20px) / 3);">My first column here</div>
    <div style="width:calc((100% - 2 * 20px) / 3)">My second column here</div>
    <div style="width:calc((100% - 2 * 20px) / 3)">My third column here</div>
</div>

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 :

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

.tck-cols-3.tck-gutter-20 > * {
    width: calc((100% - 2 * 20px) / 3);
}

Then in your html code you can simply use

<div class="tck-cols-3 tck-gutter-20">
    <div>My first column here</div>
    <div>My second column here</div>
    <div>My third column here</div>
</div>

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

<div class="tck-cols">
    <div style="width:250px;">My first FIXED column here</div>
    <div style="width:calc(100% - 260px)">My second FLUID column here</div>
</div>

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

Demo :

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.