Gonnamake Grid

Gonnamake Grid is very simple to start. Instead of using traditional 12-Grid block, 16-block this relies on percentages. Each unit we will defined with percentage.

So this is Gonnamake Grid
Simple and sweet
<div class="units-row">
    <div class="unit-50">Hello world</div>
    <div class="unit-50">It's Kube Grid System</div>
</div>

Units

Gonnamake grid uses general perferred units.

unit-100
unit-50
unit-50
unit-10
unit-90
unit-40
unit-60
unit-35
unit-65
unit-33
unit-66
unit-33
unit-33
unit-33
unit-30
unit-70
unit-25
unit-75
unit-25
unit-25
unit-25
unit-25
unit-20
unit-80
unit-20
unit-20
unit-20
unit-20
unit-20

How it works

First, create a row that will contain blocks.

<div class="units-row">

</div>

Now add your desired number of blocks with appropriate sizes.

<div class="units-row">
    <div class="unit-30"></div>
    <div class="unit-70"></div>
</div>

An example of multiple rows.

<div class="units-row">
    <div class="unit-30"></div>
    <div class="unit-70"></div>
</div>
<div class="units-row">
    <div class="unit-25"></div>
    <div class="unit-25"></div>
    <div class="unit-25"></div>
    <div class="unit-25"></div>
</div>

By default, each row has bottom margin of 1.618em, and if you don’t need this margin, do the following:

<div class="units-row end">
    <div class="unit-30"></div>
    <div class="unit-70"></div>
</div>

You can set any padding to the blocks using styles. Also, to make development faster and easier, you can use built-in class units-padding that provides block padding of 1.618em. 

<div class="units-row units-padding">
    <div class="unit-30"></div>
    <div class="unit-70"></div>
</div>

If you wish to add blocks without padding on the left and right, use units-split class: 

<div class="units-row units-split">
    <div class="unit-30"></div>
    <div class="unit-70"></div>
</div>

On mobile devices, all blocks will have unit-100 width for adaptiveness. If you need more precise controls over the width, use units-mobile-50 class. It allows you to set unit-50 width on mobile devices for specific blocks. 

<div class="units-row units-mobile-50">
    <div class="unit-30"></div>
    <div class="unit-70"></div>
</div>

If you need to wrap the whole layout or merge some rows, use units-container. This class is specifically developed for such use. You can give it any padding, margins or any other styles.

<div class="units-container">
    <div class="units-row">
        <div class="unit-30"></div>
        <div class="unit-70"></div>
    </div>
</div>

Split units

unit-40
unit-60
<div class="units-row units-split">
    <div class="unit-40">unit-40</div>
    <div class="unit-60">unit-60</div>
</div>
unit-100
unit-50
unit-50
unit-40
unit-60
unit-33
unit-66
unit-33
unit-33
unit-33
unit-30
unit-70
unit-25
unit-75
unit-25
unit-25
unit-25
unit-25
unit-20
unit-80
unit-20
unit-20
unit-20
unit-20
unit-20

Nested units

unit-20
unit-80
unit-70
unit-30
unit-25
unit-25
unit-25
unit-25
unit-20
unit-20
unit-20
unit-20
unit-20
<div class="units-row">
    <div class="unit-50">
        <div class="units-row end">
            <div class="unit-20">unit-20</div>
            <div class="unit-80">unit-80</div>
        </div>
        <div class="units-row end">
            <div class="unit-70">unit-70</div>
            <div class="unit-30">unit-30</div>
        </div>
    </div>
    <div class="unit-50">
        <div class="units-row end">
            <div class="unit-25">unit-25</div>
            <div class="unit-25">unit-25</div>
            <div class="unit-25">unit-25</div>
            <div class="unit-25">unit-25</div>
        </div>
        <div class="units-row end">
            <div class="unit-20">unit-20</div>
            <div class="unit-20">unit-20</div>
            <div class="unit-20">unit-20</div>
            <div class="unit-20">unit-20</div>
            <div class="unit-20">unit-20</div>
        </div>
    </div>
</div>

Centered

unit-40
<div class="units-row">
	<div class="unit-centered unit-40">unit-40</div>
</div>

Push right

unit-50
<div class="units-row">
	<div class="unit-push-right unit-50">unit-50</div>
</div>

Push by unit

unit-20
<div class="units-row">
	<div class="unit-push-50 unit-20">unit-20</div>
</div>
unit-80
<div class="units-row">
	<div class="unit-push-20 unit-80">unit-80</div>
</div>