<div class="container">
  <div class="col-a">span(4)</div>
  <div class="col-b">span(4 last)</div>

  <div class="col-a">span(4)</div>
  <div class="col-a">span(4)</div>
  <div class="col-a">span(4) 沒有使用 last 會被放到下一層
  </div>

</div>

$susy: (
  columns: susy-repeat(12), 
);

.container {
  background: susy-svg-grid() no-repeat scroll;
  height: 400px;
}


.col-a {
  @include span(4);
}
.col-b {
  @include span(8 last);
}

div {
  background: #dc3737;
  height: 80px;
  line-height: 80px;
  color: white;
  text-align: center;
  margin-bottom: 1rem;
}
View Compiled

External CSS

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

External JavaScript

This Pen doesn't use any external JavaScript resources.