Susy Omega problems getting the column widths correct

Question

Having problems trying to get the correct column width across 4 different breakpoints to set as i want.

When i am using span-columns(3, 12) i want the total width at the maximum size there to be 300px with 20px padding between each content. I tried to work it out mathematically to set the widths of each column but it is not working as expected.

Some of my code is:

$total-columns: 12;
$column-width: 86.666667px;
$gutter-width: 20px;
$grid-padding: 20px;
$container-width: 1300px;
$container-syle: static;

Using the (3, 12) my content block is coming out with a width of 295px. How can i get it to total 300px?

Answer 1

If you want to do math based on the column-width, you should remove the $container-width override. Then the math is pretty simple:

3 * $column-width + 2 * $gutter-width = 300px

That equation has many possible solutions, depending on the size gutters you want. Clearly you've already done that:

3 * 86.666666667px + 2 * 20 ~= 300px

or...

3 * 90px + 2 * 15px = 300px

etc. The only problem with your current setup is that you are overriding the columns-out math with your own $container-width.