div九宫格图片布局

以前我都会用display:flex弹性布局的方式来写，今天学会了一种新写法，不浮动，也不弹性的方式，用div的方式实现。
给div设置固定宽度，并带上右外边距。然后用style对index第4个（一排放4个的话index % 4 === 3 ）的margin-right:0px

<div style="width: 100%;min-height: 800px;margin-top: 60px">
        <div  v-for="(city, index) in cities"
              :key="index"
              :style="index % 4 === 3 ? 'margin-right:0px' : ''"
              class="shopping-box"></div>
</div>

.shopping-box {
  margin-right: 20px;
  width: 285px;
}