<div class="container">
  <div data-span="1">span 1 + gutter</div>
  <div data-span="2">span 1</div>
  <div class="clear"></div>
</div>
// 設定
$susy: (
  'svg-grid-colors': hsl(180, 50%, 80%),
  'columns': susy-repeat(6),
);

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

[data-span='1'] {
  width: span(1) + gutter();
  background: rgba(202, 25, 25, 0.87)
}

[data-span='2'] {
  width: span(1);
  background: rgba(25, 54, 202, 0.87)
}

[data-span] {
  float: left;
  line-height: 50px;
  color: white;
  font-size: 1rem;
  margin: 1rem 0;
}

.clear {
  clear: both;
}
View Compiled

External CSS

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

External JavaScript

This Pen doesn't use any external JavaScript resources.