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 component.

Container

Using container you can make a page so that the content is centered horizontally in the page. Following is how to create one.

 import { Container } from 'kodhus-ui-react';

<Container>Content is now in a centrally aligned container element.</Container>

Grid

Kodhus supports supports following Grid elements.

In order to make sure Grid system works effectively you need to wrap your Grid components with BlockRow component like following:

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

import { BlockRow, Block } from 'kodhus-ui-react';

<BlockRow>
    <Block size="col-12">.col-12</Block>
</BlockRow>
<BlockRow>
    <Block size="col-6">.col-6</Block>
    <Block size="col-6">.col-6</Block>
</BlockRow>
<BlockRow>
    <Block size="col-1">.col-1</Block>
    <Block size="col-11">.col-11</Block>
</BlockRow>
<BlockRow>
    <Block size="col-2">.col-2</Block>
    <Block size="col-10">.col-10</Block>
</BlockRow>
<BlockRow>
    <Block size="col-3">.col-3</Block>
    <Block size="col-9">.col-9</Block>
</BlockRow>
<BlockRow>
    <Block size="col-4">.col-4</Block>
    <Block size="col-8">.col-8</Block>
</BlockRow>
<BlockRow>
    <Block size="col-5">.col-5</Block>
    <Block size="col-7">.col-7</Block>
</BlockRow>
<BlockRow>
    <Block size="col-4">.col-4</Block>
    <Block size="col-4">.col-4</Block>
    <Block size="col-4">.col-4</Block>
</BlockRow>