Q:

Creating responsive grid based web page

I want to display static naive bar in top and rest entire page into grid of 6 column and increasing rows.
css: 
http://grids.heroku.com/grid.css?column_width=182&column_amount=6&gutter_width=5

Here is html:
<div class=container_6>
   <div class=grid_5>
   </div>    
 </div>

JSFIDDLE : http://jsfiddle.net/karimkhan/vpqvrxhn/1/
Why display page still looks empty?
I am following this doc : http://1200px.com/

A:

Why display page still looks empty?

Because your container's height is 0px. You must set some height to your Container's Grids.
I've created 6 Grids Container for you as 1200px.com for 6 columns - TRY THIS DEMO
HTML:
<div class=container_6>
   <div class=grid_1></div>   
   <div class=grid_1></div>
   <div class=grid_1></div>
   <div class=grid_1></div>
   <div class=grid_1></div>
   <div class=grid_1></div>  
</div>

CSS:
/* ---------- Containers ---------- */

.container_6 {
    margin-left: auto;
    margin-right: auto;
    width: 1122px;
}
.grid_1 {
    background-color: #FF0000;
    height: 300px;
}

[EDITED]
As per your comment:

I want entire screen to be divided into grid of 6 column and 5 row. It
  should be responsive to any device. IS that possible? – @user2129623

TRY - THIS DEMO
I've set padding: 5px 0px; and height: 20%; to .container_6 to divided the entire screen into grid of 6 columns and 5 rows and you can adjust the padding as you want.

