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)?

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

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