#Grid

Added
0.5.5

A light-weight abstraction developed as an alternative to the existing flexbox implementation.

Header

Sidebar

Main Content

Sub Content

Sub Content

Footer

By default, grid is preset with 12 individual columns horizontally and vertically. That means that it is simple to partition the grid into 144 separate cells.

Different Grid Templates

Instead of the default 12-column layout, you can specify the grid template with the grid-cols-* class. The asterisk represents any value from 1 through 12 inclusive.

grid-cols-1

grid-cols-2

grid-cols-2

grid-cols-3

grid-cols-3

grid-cols-3

grid-cols-4

grid-cols-4

grid-cols-4

grid-cols-4

I think you get the idea.

As an example, let's use a grid of 3 with the grid-cols-3 class.

1

2

3

4

5

6

7

8

9

<div class="grid grid-cols-3 grid-gap-3">
    <div class="c">
        <p>1</p>
    </div>
    <div class="c">
        <p>2</p>
    </div>
    <div class="c">
        <p>3</p>
    </div>
    <div class="c">
        <p>4</p>
    </div>
    <div class="c">
        <p>5</p>
    </div>
    <div class="c">
        <p>6</p>
    </div>
    <div class="c">
        <p>7</p>
    </div>
    <div class="c">
        <p>8</p>
    </div>
    <div class="c">
        <p>9</p>
    </div>
</div>

#Column

Grid columns are cells that span horizontally with a given amount columns to extend. This uses the grid-c-* class where the asterisk represents a number from 1 to 12 inclusive.

1
grid-c-2
grid-c-3
grid-c-4
grid-c-5
grid-c-6
grid-c-7
grid-c-8
grid-c-9
grid-c-10
grid-c-11
grid-c-12 
<div class="grid grid-gap-3">
    <div class="grid-c-1 _grid-ex">
        <span>1</span>
    </div>
    <div class="grid-c-11"></div>
    <div class="grid-c-2 _grid-ex">
        <span>grid-c-2</span>
    </div>
    <div class="grid-c-10"></div>
    <div class="grid-c-3 _grid-ex">
        <span>grid-c-3</span>
    </div>
    <div class="grid-c-9"></div>
    <div class="grid-c-4 _grid-ex">
        <span>grid-c-4</span>
    </div>
    <div class="grid-c-8"></div>
    <div class="grid-c-5 _grid-ex">
        <span>grid-c-5</span>
    </div>
    <div class="grid-c-7"></div>
    <div class="grid-c-6 _grid-ex">
        <span>grid-c-6</span>
    </div>
    <div class="grid-c-7 _grid-ex">
        <span>grid-c-7</span>
    </div>
    <div class="grid-c-8 _grid-ex">
        <span>grid-c-8</span>
    </div>
    <div class="grid-c-9 _grid-ex">
        <span>grid-c-9</span>
    </div>
    <div class="grid-c-10 _grid-ex">
        <span>grid-c-10</span>
    </div>
    <div class="grid-c-11 _grid-ex">
        <span>grid-c-11</span>
    </div>
    <div class="grid-c-12 _grid-ex">
        <span>grid-c-12</span>
    </div>
</div>

For designs that require greater control, use the grid-cs-* and grid-ce-* classes to denote the start and end range for the column span. The values in asterisk could range from 1 to 12 and are both inclusive. Use the grid-col-end class to stretch the column span to the end of the grid.

2-7
1-4
6 - end 
<div class="grid grid-gap-3">
    <div class="grid-cs-2 grid-ce-7 _grid-ex">
        2-7
    </div>
    <div class="grid-cs-1 grid-ce-4 _grid-ex">
        1-4
    </div>
    <div class="grid-c-5"></div>
    <div class="grid-cs-6 grid-cs-end _grid-ex">
        6 - end
    </div>
</div>

#Column

Grid rows are cells that span vertically with a given amount rows to extend. This uses the grid-r-* class where the asterisk represents a number from 1 to 12 inclusive. The heights of the various row spans varies with the amount of content present along with the grid gaps.

grid-r-1
grid-r-2
grid-r-3
grid-r-4
grid-r-5
grid-r-6
grid-r-7
grid-r-8
grid-r-9
grid-r-10
grid-r-11
grid-r-12 
<div class="grid grid-gap-3">
    <div class="grid-r-1 _grid-ex level">
        <span>grid-r-1</span>
    </div>
    <div class="grid-r-2 _grid-ex level">
        <span>grid-r-2</span>
    </div>
    <div class="grid-r-3 _grid-ex level">
        <span>grid-r-3</span>
    </div>
    <div class="grid-r-4 _grid-ex level">
        <span>grid-r-4</span>
    </div>
    <div class="grid-r-5 _grid-ex level">
        <span>grid-r-5</span>
    </div>
    <div class="grid-r-6 _grid-ex level">
        <span>grid-r-6</span>
    </div>
    <div class="grid-r-7 _grid-ex level">
        <span>grid-r-7</span>
    </div>
    <div class="grid-r-8 _grid-ex level">
        <span>grid-r-8</span>
    </div>
    <div class="grid-r-9 _grid-ex level">
        <span>grid-r-9</span>
    </div>
    <div class="grid-r-10 _grid-ex level">
        <span>grid-r-10</span>
    </div>
    <div class="grid-r-11 _grid-ex level">
        <span>grid-r-11</span>
    </div>
    <div class="grid-r-12 _grid-ex level">
        <span>grid-r-12</span>
    </div>
</div>

For designs that require greater control, use the grid-rs-* and grid-re-* classes to denote the start and end range for the column span. The values in asterisk could range from 1 to 12 and are both inclusive. Use the grid-row-end class to stretch the column span to the end of the grid.

10-12
8-12
6-12
4-12
2-12
4-12
6-12
8-12
10-12 
<div class="grid grid-cols-9 grid-gap-3">
    <div class="grid-rs-10 grid-re-12 _grid-ex">
        10-12
    </div>
    <div class="grid-rs-8 grid-re-12 _grid-ex">
        8-12
    </div>
    <div class="grid-rs-6 grid-re-12 _grid-ex">
        6-12
    </div>
    <div class="grid-rs-4 grid-re-12 _grid-ex">
        4-12
    </div>
    <div class="grid-rs-2 grid-re-12 _grid-ex">
        2-12
    </div>
    <div class="grid-rs-4 grid-re-12 _grid-ex">
        4-12
    </div>
    <div class="grid-rs-6 grid-re-12 _grid-ex">
        6-12
    </div>
    <div class="grid-rs-8 grid-re-12 _grid-ex">
        8-12
    </div>
    <div class="grid-rs-10 grid-re-12 _grid-ex">
        10-12
    </div>
</div>

#Gaps

Grid gaps are added in order to provide spacing between the individual grid cells. This uses the grid-gap-* class where the asterisk represents a number from 1 to 9 inclusive.

 
 
 
 
 
 
 
 
  
<div class="grid grid-cols-4 grid-gap-3">
    <div class="grid-c-2 grid-r-2" style="background: #0071bc">
        &nbsp;
    </div>
    <div class="grid-c-1 grid-r-1" style="background: #29abe2;">
        &nbsp;
    </div>
    <div class="grid-c-1 grid-r-1" style="background: #29abe2;">
        &nbsp;
    </div>
    <div class="grid-c-2 grid-r-1" style="background: #00a99d;">
        &nbsp;
    </div>
    <div class="grid-c-1 grid-r-1" style="background: #29abe2;">
        &nbsp;
    </div>
    <div class="grid-c-1 grid-r-1" style="background: #29abe2;">
        &nbsp;
    </div>
    <div class="grid-c-2 grid-r-2" style="background: #0071bc">
        &nbsp;
    </div>
    <div class="grid-c-1 grid-r-1" style="background: #29abe2;">
        &nbsp;
    </div>
    <div class="grid-c-1 grid-r-1" style="background: #29abe2;">
        &nbsp;
    </div>
</div>