<div class="container">
  <div class="wrap">
    5/12
    <div class="item">
      <div class="cell">
        4/5
      </div>
    </div>
  </div>
  
  <div class="wrap-2">7/12</div>

</div>

// 設定
$susy: (
  'svg-grid-colors': hsl(180, 50%, 80%),
  'columns': susy-repeat(12),
  'gutters': 0.25,
  'spread': 'narrow',
  'container-spread': 'narrow',
);

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


.wrap {
  width: span(5);
  background: #d24439;
  height: 200px;
  float: left;
  margin-right: gutter();
}

.wrap-2 {
  width: span(7);
  background: #d24439;
  height:200px;
  float:left;
}

.item {
  width: span(4 of 5);
  background: #589d3f;
  height: 150px;    
}

div {
  text-align: center;
  font-size: 20px;
}