Replacing 960 grid in V3

Hi, I have been playing with V3.0.1 for last couple of days. Really love it. Just spent 30 minutes trying to change grid, and it was really easy. I changed mine to 1024 with 7px padding, 16 columns. That is 16 colums, each 50px wide, with 7px padding on each side. Gives 14px between columns. Default is 40px columns with 20px between them. My site is, feel free to have a look at this grid.

I did the following:

  1. Go to and generate new grid. I uploaded 1024 grid I created.

  2. Replace “myskin/customer/css” with downloaded(created) grid files. There are 3 files to replace: 960.css, reset.css and text.css

    3)Update “min-width: 920px;” line in dropdown.css (myskin/customer folder) with new value. Value must be:

    value = ((grid width)-(padding*2)-20

    For example, for a 1024 wide site with 7 padding, it will be 990px

    In step 3, a better idea is to not update actual dropdown.css file, but add following line to “myskin/customer/addons/my_changes/style.css” file (see [url=“CS-Cart Documentation — CS-Cart 4.15.x documentation”]CS-Cart Documentation — CS-Cart 4.15.x documentation):

/* For 1024 grid with 7 padding */
ul.dropdown-multicolumns {
min-width: 990px;

I was suprised how easy it was, and thought I had to share it!

Another super easy way to do it, is to follow the instructions that are in the knowledge base. Just go to and make your grid. Then just copy your new grid code into your 960.css file, overwriting the existing code.

One file to change, easy cheesy.