Susy basic fixed grid

Question

I'm new to Susy and I'm loving it. I've been learning and trying a simple example - a simple grid that contains two columns at a fixed resolution of 320 pixels. One test would be to have two side by side columns (#x and #y) with gutter space in-between and another would be another two side by side columns (#a and #b) but without any gutter space in-between and they're both .

For the susy map, I've used .1334 for gutters and it all adds up to 320.01 pixels.

Questions

• Is there a better way of defining the gutter space? having some decimals in 320.01 seems odd.

• Is there a better way of getting #a and #b to be half widths without setting it to 160px and using no-gutters?

• Is there an overall better way of writing this whole thing (maps, layouts, settings)?

The code

html {
    box-sizing: border-box;
}
*, *:before, *:after {
    box-sizing: inherit;
}

$susy: (
  math: static,
  columns: 2,
  gutters: .1334,
  column-width: 150px,
  global-box-sizing: content-box,
  debug: (
      image: show,
      color: rgba(#66f, .25),
   output: background
  ),
  use-custom: (
      box-sizing: true
  )
);

main {
    @include container(320px);
}

#x,
#y,
#a,
#b {
    border: solid 1px #000;
    float: left;
}

#x {
    @include span(1 of 2);
}

#y {
    @include span(1 of 2 last);
}

#a {
    @include span(160px no-gutters);
}

#b {
    @include span(160px last);
}

#z,
#c {
    @include span(2 of 2);
    border: solid 1px #000;
}

<main>
    <div id="x">x</div>
    <div id="y">y</div>
    <div id="z">z</div>
    <div id="a">a</div>
    <div id="b">b</div>
    <div id="c">c</div>
</main>

http://sassmeister.com/gist/d4b0d898d4a6c987f947

Answer 1

1. You'd be better off setting the gutter width as a ratio.
2. You can use math: fluid to create a fluid layout. Your column widths will then be calculated relative to the container without the need for specifying column width.
3. Sorry, don't know enough about Susy to give you general code improvement advice.