プロジェクトにおける CSS グリッドシステムの柔軟な使用方法の詳細な説明

<div id="アプリ">
  <div class="grid-container">
    <div style="幅: 25%; 高さ: 220px; フロート: 左; 背景色: #FF6600; "></div>
    <div class="row" style="width: 75%; float: right;">
      <div class="col-3" v-for="(item, index) in groupListCol3" :key="index">
        <div class="groups-cell">{{item.name}}</div>
      </div>
    </div>
    <div class="row" style="width: 100%;">
      <div class="col-4" v-for="(item, index) in groupListCol4" :key="index">
        <div class="groups-cell">{{item.name}}</div>
      </div>
    </div>
  </div>
</div>

.グリッドコンテナ{
      幅: 100%;
    }
    .グリッドコンテナ *{
      ボックスのサイズ: 境界線ボックス;
    }

    .grid-container .row:before、
    .grid-container .row:after {
      コンテンツ： "";
      表示: テーブル;
      クリア: 両方;
    }

    .grid-container [クラス*='col-'] {
      フロート: 左;
      最小高さ: 1px;
      /*-- ガター --*/
      パディング: 0 0 20px 20px;
    }
    .グリッドコンテナ .col-3{
      幅: 33.33%;
      高さ: 120px;
    }
    .グリッドコンテナ .グループセル {
      背景色: #66d3ff;
      高さ: 100px;
    }
    .grid-container .col-4 {
      幅: 25%;
      高さ: 120px;
    }
    .grid-container .col-4:n番目の子(4n+1) {
      パディング: 0 0px 20px 0px;
    }

<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
<スクリプト>
  新しいVue({
    el: '#app',
    データ： {
      グループリスト列3: [],
      グループリスト列4: []
    },
    作成された（）{
      リスト = [
        {名前: 'A'},
        {名前: 'B'},
        {名前: 'C'},
        {名前: 'D'},
        {名前: 'E'},
        {名前: 'F'},
        {名前: 'G'},
        {名前: 'H'},
        {名前: '私'},
        {名前: 'J'},
        {名前: 'K'},
        {名前: 'L'}
      ]
      リストの長さが6より大きい場合
        this.groupListCol3 = リスト.スライス(0, 6)
        this.groupListCol4 = リスト.スライス(6)
      } それ以外 {
        this.groupListCol3 = リスト
      }
    }
  })
</スクリプト>