The grid uses a margin-right:2% on each grid element to provide spacing. This allows the left side to line up with other content. You will need to put a class of last on the last grid item of a row to prevent the last item from wrapping.
Due to percentages not being easily embedded within each other (grid-3 = 25%, but inside of a grid-6 it would need to be 50%) this only supports a top level grid. The 25/33/50 can relatively easily be embedded within each other, but is not supported.
We provide you with a set of classes that will give you a fixed width grid that will fit in a 1024 width screen. These are used in association with the padding/margin-sm/md/lg classes to provide spacing on the edges, and also account for edge chrome of the design.
All you need to do is apply .grid-fixed to the same wrapper that has your padding/margin-sm/md/lg. Toggle fixed grid on this page
After that, the grid works the same. It technically still uses percentages but 1/2 of 1000px is 500px wether it's written 50% or 500px. So sticking with the percentages allows us to use the same code for 100% or fixed width content areas. It also allows you to define any other fixed width you want and the grid will work the same way.
If you are using the panels, keep in mind that a grid-3 inside of a narrow panel is not the same as a grid-3 inside of a wide panel. This is likely where you'll want to use the grid-25/33/50 options.
These are for larger grids of 25%/33%/50%/66%/75%
.grid-25
.grid-75
.grid-33
.grid-66
.grid-50
.grid-50
These are based off of a 12 column grid. This allows for 1 grid increments and is divisible by 1, 2, 3, 4, 6, 12
.grid-1
.grid-1
.grid-1
.grid-1
.grid-1
.grid-1
.grid-1
.grid-1
.grid-1
.grid-1
.grid-1
.grid-1
.grid-2
.grid-2
.grid-2
.grid-2
.grid-2
.grid-2
.grid-3
.grid-3
.grid-3
.grid-3
.grid-4
.grid-4
.grid-4
.grid-5
.grid-7
.grid-6
.grid-6
You can add space before and/or after a grid element by using prefix-# and suffix-#. All boxes below are .grid-1
.suffix-11
.prefix-1 .suffix-10
.prefix-2 .suffix-9
.prefix-3 .suffix-8
.prefix-4 .suffix-7
.prefix-5 .suffix-6
.prefix-6 .suffix-5
.prefix-7 .suffix-4
.prefix-8 .suffix-3
.prefix-9 .suffix-2
.prefix-10 .suffix-1
.prefix-11
If you put a grid-50 (50%) inside of a grid-6 it will be the equivalent of a grid-3 as you would expect. But the 2% gutter is 2% of a smaller width, and so the gutter will be smaller at the second level then the first level.
This can technically be compensated for, but it would require a very complex (read:large) set of CSS to do so. You would have to say what a grid-3 was when inside of a grid-4, grid-5, grid-6, etc. Then what a grid-4 is inside of a grid-5, grid-6, grid-7, etc.