<div class="container">
  <div data-span="1">span 1</div>
  <div data-span="2">span 2 + margin left 1</div>
  <div data-span="3">span 3 + padding left 1</div>
</div>
// Settings
$susy: (
  'svg-grid-colors': hsl(180, 50%, 80%),
  'columns': susy-repeat(6),
);

// Demo
.container {
  background: susy-svg-grid() no-repeat scroll;
  max-width: 1280px;
  margin: 0 auto;
  height: 600px;
}


[data-span='1'] {
  width: span(1);
}
[data-span='2'] {
  width: span(2);
  margin-left: span(1) + gutter();
}
[data-span='3'] {
  width: span(3);
  padding-left: span(1) + gutter();
}

[data-span] {
  background: rgba(202, 25, 25, 0.87);
  line-height: 50px;
  color: white;
  font-size: 1rem;
  margin-bottom: 1rem;
}

External CSS

  1. https://codepen.io/mirisuzanne/pen/awdMoa
  2. https://codepen.io/mirisuzanne/pen/QgyoWp

External JavaScript

This Pen doesn't use any external JavaScript resources.