<div class="container">
  <div>
      <div data-span="4">span</div>
      <div data-span="4">span</div>
      <div data-span="4">span</div>
      <div data-span="4">span</div>
      <div data-span="4">span</div>
      <div data-span="4">span</div> 
  </div> 
  <div class="clear"></div>
  <div>
      <div data-span="3">span</div>  
      <div data-span="3">span</div>  
      <div data-span="3">span</div>  
      <div data-span="3">span</div>  
      <div data-span="3">span</div>  
  </div>
</div>
$susy: (
  columns: susy-repeat(12), 
);

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

// 每個元素 4 個柵欄
[data-span='4'] {  
  @include gallery(4);
  background: rgba(214, 30, 71, 0.88);
}

// 每個元素 3 個柵欄
[data-span='3']{
  @include gallery(3);
  background: rgba(30, 179, 214, 0.88);
}

// 以下共用樣式可以忽略
[data-span] {
  color: white;
  text-align: center;
  line-height: 3rem;
  margin-bottom: 1rem;
}
.clear {
  clear: both;
}

External CSS

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

External JavaScript

This Pen doesn't use any external JavaScript resources.