Grid system

The idea of having a grid system is to make sure you can create awesome layouts and also make responsive pages.

Kodhus has a standard grid system. Let's start by introducing the container class.

Container

Using container you can make a page so that the content is centered horizontally in the page. Following is how to create one. You need to use .cdt-container class on the root element.

<div class="cdt-container">Content is now within a centrally aligned container.</div>
          

Grid

Kodhus supports supports following Grid elements.

In order to make sure Grid system works effectively you need to wrap your Grid items within .cdt-row parent element.

.cdt-12
.cdt-6
.cdt-6
.cdt-1
.cdt-11
.cdt-2
.cdt-10
.cdt-3
.cdt-9
.cdt-4
.cdt-8
.cdt-5
.cdt-7
.cdt-4
.cdt-4
.cdt-4

Following is the actual code for the Grid above:

<div class="cdt-row">
    <div class="cdt-12">.cdt-12</div>
</div>
<div class="cdt-row">
    <div class="cdt-6">.cdt-6</div>
    <div class="cdt-6">.cdt-6</div>
</div>
<div class="cdt-row">
    <div class="cdt-1">.cdt-1</div>
    <div class="cdt-11">.cdt-11</div>
</div>
<div class="cdt-row">
    <div class="cdt-2">.cdt-2</div>
    <div class="cdt-10">.cdt-10</div>
</div>
<div class="cdt-row">
    <div class="cdt-3">.cdt-3</div>
    <div class="cdt-9">.cdt-9</div>
</div>
<div class="cdt-row">
    <div class="cdt-4">.cdt-4</div>
    <div class="cdt-8">.cdt-8</div>
</div>
<div class="cdt-row">
    <div class="cdt-5">.cdt-5</div>
    <div class="cdt-7">.cdt-7</div>
</div>
<div class="cdt-row">
    <div class="cdt-4">.cdt-4</div>
    <div class="cdt-4">.cdt-4</div>
    <div class="cdt-4">.cdt-4</div>
</div>