how to use a 16 column responsive grid with 20px gutter

I have tried a lot of grids from skeleton to golden and bootstrap but I was unable to find a better solution. The one that came close was grid pack. but I dont want any column margin. Is you can let me know what is the better way to do it. For eg. I want to use a 10 col with 6col floating div...with 12 col i tried 8col with 4col and 7col with 5col..but i dont get the exact width of the psd.

You can see i have added a screenshot of psd.

Thanks

PS. I am not attaching any code because im confused. so please dont down vote. I just need an advice or small demo

Grids are fairly simple.

The reason why you might be slightly confused is that people use fixed and fluid grids, fluid is usually set in percentages and fixed pixels.

To use fixed just start with creating a container size that you will center in the browser so,

.container { 
    width:960px;
    margin: 0 auto;
} 

Divide 960px by 10 = 96px per column

In CSS, create a class for each grid size using the formula 96 * 1, 96 * 2, all the way to 10

grid_1 { width: 96px; }
grid_2 { width: 192px; }
grid_3 { width: 288px; }
grid_4 {...}

then apply the classes to the elements in your HTML so

<div class="logo grid_3"></div>
<div class="nav grid_7"></div>

Most grid systems also use a "prefix" and "suffix" with margin applied, which pushes or pulls elements to the left or right when you don't want a container that needs to be a grid_3 but your having to make a grid_7 because of spacing.

Grids are great at creating visual balance and also providing a way for us as developers/designers to lay out content easier.

fluid grids are slightly different and I would wrap your head around fixed first.

[edit] you should use what is in the design. use (suffix and prefix) like I explained to push and pull elements on the page, so use (suffix_1) as a way of pushing the right side element away creating the column gap in the design, same goes for prefix_1