g16 grid set

Responsive Grid With Unlimited Possibility

43 Page Layout Templates

Unlimited Mixed Grid Pack

Web Element Supports

Intro

Grid is a network of lines or bars that are combined together horizontally or vertically to form a unit or cell. It acts as a foundation and platform upon which graphic elements may be structured or organized. When combined together, they form a modular, hierarchical, and manuscript grid system.

G16 grid set is a revolutionary sixteen column grid system that works best and suitable to create a responsive fluid grid solution by using a multiple of four to generate consistent grid flow system that perfectly blends well with any web elements in various layouts such as fixed, liquid and elastic.

You can learn more about the fundamental behaviour of g16 grid system as defined by g16framework.

Terminology

Clearance class

Clearance class helps resolve the clearing of stacked columns when floated or piled within a containing block and its great to maintain the normal flow of elements within a document. It is usually represented by group and row class

1. Group

Group class is identified by (.group) and is used to clear a set of columns or any elements when stacked without enforcing equality in height. It is useful if the layout design block priority is of varying heights. Read full documentation here.

2. Row

Row class is identified by (.row) and is used to clear set of columns or any elements when stacked, designated element with this class always have equal height and stretched to the same height level without constraint when combined or used together to create a modular or columnal grid layout. Read full documentation here.

3. Tiles

Tile grids are relatively displayed in form of row-column formation structure. The presentation of such always has a resemblance to a tower of varying heights. To display a grid in form of tiles, you would need to assign a specific height to every column within the containing block. Read full documentation here.

4. Hack

Primarily all the column grid classes come with margin and generated gutter between the column, hack-class does eliminate any embedding empty spaces between units and columns.

Mixed Grids

A mixed columns grid contain two or more columns of equal or different sizes, when combined together their total size is proportional to that of the parent container.

Combination of two or more column must maintain a total of 16 and not more than 100%, irrespective of the mixing ratio proportion. You can mix 2:3:11, 4:4:4:4, or 8:8 but not 3:4:10 or 13:4:1. Learn more about mixing ratio .

Classes

Class Fractional Proportion Percentage Proportion
g16-mc-1 1/16 6.25
g16-mc-2 2/16 12.50
g16-mc-3 3/16 18.75
g16-mc-4 4/16 25.00
g16-mc-5 5/16 31.25
g16-mc-6 6/16 37.50
g16-mc-7 7/16 43.75
g16-mc-8 8/16 50.00
g16-mc-9 9/16 6.25
g16-mc-10 10/16 62.50
g16-mc-11 11/16 68.75
g16-mc-12 12/16 75.00
g16-mc-13 13/16 81.25
g16-mc-14 14/16 87.50
g16-mc-15 15/16 93.75
g16-mc-16 16/16 100.00

Mixed Grid Demo

16
1
15
2
14
3
13
4
12
5
11
6
10
7
9
8
8
9
7
10
6
11
5
12
4
13
3
14
2
15
1

Mixing Ratio

The possibility of mixing columns of different or equal width is infinite provided the total width of the columns are equal to 16 and when added together, their value never exceeded 100%. Learn more about grid.

Mixed ratio 3:4:8:1

This ratio would divide a giving containing block into four mixed columns with 16.75%, 23%, 48% and 4.25% and with 1% margin to the left and right and 2% gutter. Learn more about mixing ratio.

316.75%

423%

848%

14.25%

 
    <div class="row">
	     <div class="g16-mc-3"></div>
	     <div class="g16-mc-4"></div>
	     <div class="g16-mc-8"></div>
	     <div class="g16-mc-1"></div>
    </div>

Mixed ratio 6:10

This ratio would divide a giving containing block into two mixed columns of 37.75% and 60.25% with 1% margin to the left and right and 2% gutter.

637.75%

1060.25%

 
    <div class="row">
	     <div class="g16-mc-6"></div>
	     <div class="g16-mc-10"></div>
    </div>

Equal Grids

These grid sets contain equal number of column with the same size within a given container. It spans through 2 to 16 with the exception of the full width column class. Combination of any of these two equal grids will be proportional or equal to the total size of the containing block.

Class Fractional Proportion Percentage Proportion
g16-c-2 1/2 (2 equal columns) 50.00
g16-c-3 1/3 (3 equal columns) 33.33...
g16-c-4 1/4 (4 equal columns) 25.00
g16-c-5 1/5 (5 equal columns) 20.00
g16-c-6 1/6 (6 equal columns) 16.66...
g16-c-7 1/7 (7 equal columns) 14.28...
g16-c-8 1/8 (8 equal columns) 12.50
g16-c-9 1/9 (9 equal columns) 11.11...
g16-c-10 1/10 (10 equal columns) 10.00
g16-c-11 1/11 (11 equal columns) 9.09...
g16-c-12 1/12 (12 equal columns) 8.33...
g16-c-13 1/13 (13 equal columns) 7.69...
g16-c-14 1/14 (14 equal columns) 7.14...
g16-c-15 1/15 (15 equal columns) 6.66...
g16-c-16 1/16 (16 equal columns) 6.25

Equal Grid Demo

g16-c-2 (48%)
g16-c-2 (48%)
g16-c-3 (31.33..%)
g16-c-3 (31.33..%)
g16-c-3 (31.33..%)
g16-c-4 (23%)
g16-c-4 (23%)
g16-c-4 (23%)
g16-c-4 (23%)
g16-c-5 (18%)
g16-c-5 (18%)
g16-c-5 (18%)
g16-c-5 (18%)
g16-c-5 (18%)
g16-c-6 (14.66...%)
g16-c-6 (14.66...%)
g16-c-6 (14.66...%)
g16-c-6 (14.66...%)
g16-c-6 (14.66...%)
g16-c-6 (14.66...%)
g16-c-7 (12.28...%)
g16-c-7 (12.28...%)
g16-c-7 (12.28...%)
g16-c-7 (12.28...%)
g16-c-7 (12.28...%)
g16-c-7 (12.28...%)
g16-c-7 (12.28...%)
g16-c-8 (10.50...%)
g16-c-8 (10.50...%)
g16-c-8 (10.50...%)
g16-c-8 (10.50...%)
g16-c-8 (10.50...%)
g16-c-8 (10.50...%)
g16-c-8 (10.50...%)
g16-c-8 (10.50...%)
g16-c-9 (9.11...%)
g16-c-9 (9.11...%)
g16-c-9 (9.11...%)
g16-c-9 (9.11...%)
g16-c-9 (9.11...%)
g16-c-9 (9.11...%)
g16-c-9 (9.11...%)
g16-c-9 (9.11...%)
g16-c-9 (9.11...%)
g16-c-10 (8.00...%)
g16-c-10 (8.00...%)
g16-c-10 (8.00...%)
g16-c-10 (8.00...%)
g16-c-10 (8.00...%)
g16-c-10 (8.00...%)
g16-c-10 (8.00...%)
g16-c-10 (8.00...%)
g16-c-10 (8.00...%)
g16-c-10 (8.00...%)
g16-c-11 (7.09...%)
g16-c-11 (7.09...%)
g16-c-11 (7.09...%)
g16-c-11 (7.09...%)
g16-c-11 (7.09...%)
g16-c-11 (7.09...%)
g16-c-11 (7.09...%)
g16-c-11 (7.09...%)
g16-c-11 (7.09...%)
g16-c-11 (7.09...%)
g16-c-11 (7.09...%)
g16-c-12 (6.33...%)
g16-c-12 (6.33...%)
g16-c-12 (6.33...%)
g16-c-12 (6.33...%)
g16-c-12 (6.33...%)
g16-c-12 (6.33...%)
g16-c-12 (6.33...%)
g16-c-12 (6.33...%)
g16-c-12 (6.33...%)
g16-c-12 (6.33...%)
g16-c-12 (6.33...%)
g16-c-12 (6.33...%)
g16-c-13 (5.69...%)
g16-c-13 (5.69...%)
g16-c-13 (5.69...%)
g16-c-13 (5.69...%)
g16-c-13 (5.69...%)
g16-c-13 (5.69...%)
g16-c-13 (5.69...%)
g16-c-13 (5.69...%)
g16-c-13 (5.69...%)
g16-c-13 (5.69...%)
g16-c-13 (5.69...%)
g16-c-13 (5.69...%)
g16-c-13 (5.69...%)
g16-c-14 (5.14...%)
g16-c-14 (5.14...%)
g16-c-14 (5.14...%)
g16-c-14 (5.14...%)
g16-c-14 (5.14...%)
g16-c-14 (5.14...%)
g16-c-14 (5.14...%)
g16-c-14 (5.14...%)
g16-c-14 (5.14...%)
g16-c-14 (5.14...%)
g16-c-14 (5.14...%)
g16-c-14 (5.14...%)
g16-c-14 (5.14...%)
g16-c-14 (5.14...%)
g16-c-15 (4.66...%)
g16-c-15 (4.66...%)
g16-c-15 (4.66...%)
g16-c-15 (4.66...%)
g16-c-15 (4.66...%)
g16-c-15 (4.66...%)
g16-c-15 (4.66...%)
g16-c-15 (4.66...%)
g16-c-15 (4.66...%)
g16-c-15 (4.66...%)
g16-c-15 (4.66...%)
g16-c-15 (4.66...%)
g16-c-15 (4.66...%)
g16-c-15 (4.66...%)
g16-c-15 (4.66...%)
g16-c-16 (4.25...%)
g16-c-16 (4.25...%)
g16-c-16 (4.25...%)
g16-c-16 (4.25...%)
g16-c-16 (4.25...%)
g16-c-16 (4.25...%)
g16-c-16 (4.25...%)
g16-c-16 (4.25...%)
g16-c-16 (4.25...%)
g16-c-16 (4.25...%)
g16-c-16 (4.25...%)
g16-c-16 (4.25...%)
g16-c-16 (4.25...%)
g16-c-16 (4.25...%)
g16-c-16 (4.25...%)
g16-c-16 (4.25...%)

Equal Grid Sample

The equal grid rule of thumb is, the combination of column will always be the same regardless, and when added together their total value is equal to 16 or 100% the equivalent value of the parent container.

3 equal grids

g16-c-3 (31.33..%)

g16-c-3 (31.33..%)

g16-c-3 (31.33..%)

 
    <div class="row">
	     <div class="g16-c-3"></div>
	     <div class="g16-c-3"></div>
	     <div class="g16-c-3"></div>
    </div>

4 equal grids

g16-c-4 (23%)

g16-c-4 (23%)

g16-c-4 (23%)

g16-c-4 (23%)

 
    <div class="row">
        <div class="g16-c-4"></div>
        <div class="g16-c-4"></div>
        <div class="g16-c-4"></div>
        <div class="g16-c-4"></div>
    </div>

grids at different breakpoints

Classes     min-240px max-640px     min 768px max 1024px     Desktop Screen
Responsive Grid Class Behaviour at different breakpoints.
c-2 width is 100% each, and columns are stacked
width is 50% each (2 by 1), and columns are redistributed in 2:1 equal stacked ratio
width is 25% each , and columns are redistributed in 2 equal grids.
c-3 width is 100% each , and columns are stacked
width is 50% each (3 by 1), and columns are redistributed in 3 equal stacked ratio
width is 33.33...% each , and columns are redistributed in 4 equal grids.
g16-c-4 width is 100% each , and columns are stacked
width is 50% each (2 by 2), and columns are redistributed in 2:2 equal stacked ratio
width is 25% each , and columns are redistributed in 4 equal grids.
c-5 width is 100% , and columns are stacked
width is 50% (2 by 1), 33.33% (3 by 1) , and columns are redistributed in 2:3 stacked ratio
width is 20% , and columns are redistributed in 5 equal grids
c-6 width is 100% , and columns are stacked
width is 33.33% (3 by 2) , and columns are redistributed in 3:2 stacked ratio
width is 20% , and columns are redistributed in 6 equal grids
c-7 width is 100% , and columns are stacked
width is 50% (2 by 2) & 33.33%(3 by 1), and columns are redistributed in 2:2:3 stacked ratio
width is 12.28% , and columns are redistributed in 7 equal grids
g16-c-8 width is 100% , and columns are stacked
width is 50% (2 by 4), and columns are redistributed in 2:2:2:2 stacked ratio
width is 10.5%, and columns are redistributed in 8 equal grids
c-9 width is 100% , and columns are stacked
width is 33.33...% (3 by 3), and columns are redistributed in 3:3:3 stacked ratio
width is 9.11% , and columns are redistributed in 9 equal grids
c-10 width is 100% , and columns are stacked
width is 50% (2 by 5), and columns are redistributed in 2:2:2:2:2 stacked ratio
width is 8% , and columns are redistributed in 10 equal grids
c-11 width is 100% , and columns are stacked
width has 50% (2 by 1) & 33.33% (3 by 3), and columns are redistributed in 2:3:3:3 stacked ratio
width is 7.09...% , and columns are redistributed in 11 equal grids
c-12 width is 100% , and columns are stacked
width is 50% (2 by 6), and columns are redistributed in 2:2:2:2:2:2 stacked ratio
width is 6.33...% , and columns are redistributed in 12 equal grids
c-13 width is 100% , and columns are stacked
width has 50% (2 by 2) & 33.33% (3 by 3), and columns are redistributed in 2:2:3:3:3 stacked ratio
width is 5.69...% , and columns are redistributed in 10 equal grids
c-14 width is 100% , and columns are stacked
width is 50% (2 by 7), and columns are redistributed in 2:2:2:2:2:2:2 stacked ratio
width is 5.14...% , and columns are redistributed in 14 equal grids
c-15 width is 100% , and columns are stacked
width is 33.33...% (3 by 5), and columns are redistributed in 3:3:3:3:3 stacked ratio
width is 4.66..% , and columns are redistributed in 15 equal grids
c-16 width is 100% , and columns are stacked
width is 50% (2 by 8), and columns are redistributed in 2:2:2:2:2:2:2:2 stacked ratio
width is 4.25% , and columns are redistributed in 16 equal grids

How to Hack

This class work for all the grid set family and absolutely remove the box dependency such as margins and gutter.

 
    <div class="g16hack">
      ... column class here
    </div>

Tile

For complete details about grid tile, please read full documentation here.
 
    <div class="g16-tiles ">
	    <!-- tiles columns layout where N column is 2,3,4...16 and H is the defined height for each item -->
	    <div class="g16-tiles-N">
          <div class="tile-item H"></div>
	    </div>	
    </div>