@include grid(3, 3, true); // 3 x 3, 有邊框, 且每個格為正方形@include grid(2, 5, false, false); // 2 x 5, 無邊框

<!-- a-grid是一個flex容器, 方便他的內容做"水平/垂直居中" --><div class="a-grid">  <!-- a-grid__item用來占位實現正方形 -->  <div class="a-grid__item">      <!-- item__content才是真正裝內容的容器 -->      <div class="item__content">        內容...      </div>  </div></div>

.a-grid {    display: flex;    flex-wrap: wrap;    width: 100%;    .a-grid__item {        text-align:center;        position:relative;        >.item__content {            display:flex            flex-flow: column;            align-items: center;            justify-content: center;        }    }}@mixin grid($row:3, $column:3, $hasBorder:false, $isSquare:true) {    @extend .a-grid;    .a-grid__item {        flex-basis: 100%/$column;        @if($isSquare) {            padding-bottom: 100%/$column;            height: 0;        }        >.item__content {            @if($isSquare) {                position:absolute;                top:0;left:0;right:0;bottom:0;            }        }    }    @for $index from 1 to (($row - 1) * $column + 1) {        .a-grid__item:nth-child(#{$index}) {            @if($hasBorder) {                border-bottom: 1px solid #eee;            }        }    }    @for $index from 1 to $column {        .a-grid__item:nth-child(#{$column}n + #{$index}) {            @if($hasBorder) {                border-right: 1px solid #eee;            }        }    }}

// 生成一個 3行3列, 正方形格子的宮格.a-grid-3-3 {    @include grid(3, 3, true);}// 生成一個 2行5列, 無邊框宮格, 每個格子由內容決定高度.a-grid-2-5 {    @include grid(2, 5, false, false);}