Detaillierte Erläuterung der flexiblen Verwendung des CSS-Rastersystems in Projekten

<div id="app">
  <div Klasse="Raster-Container">
    <div style="Breite: 25 %; Höhe: 220px; Float: links; Hintergrundfarbe: #FF6600; "></div>
    <div Klasse = "Zeile" Stil = "Breite: 75 %; Float: rechts;">
      <div Klasse="col-3" v-for="(Element, Index) in groupListCol3" :key="index">
        <div class="groups-cell">{{item.name}}</div>
      </div>
    </div>
    <div Klasse="Zeile" Stil="Breite: 100%;">
      <div Klasse="col-4" v-for="(Element, Index) in groupListCol4" :key="index">
        <div class="groups-cell">{{item.name}}</div>
      </div>
    </div>
  </div>
</div>

.Gittercontainer {
      Breite: 100 %;
    }
    .Raster-Container *{
      Box-Größe: Rahmenbox;
    }

    .grid-container .row:vorher,
    .grid-container .row:nach {
      Inhalt: "";
      Anzeige: Tabelle;
      klar: beides;
    }

    .grid-container [Klasse*='col-'] {
      schweben: links;
      Mindesthöhe: 1px;
      /*-- Rinne --*/
      Polsterung: 0 0 20px 20px;
    }
    .grid-container .col-3{
      Breite: 33,33 %;
      Höhe: 120px;
    }
    .grid-container .groups-zelle {
      Hintergrundfarbe: #66d3ff;
      Höhe: 100px;
    }
    .grid-container .col-4 {
      Breite: 25 %;
      Höhe: 120px;
    }
    .grid-container .col-4:n-tes-Kind(4n+1) {
      Polsterung: 0 0px 20px 0px;
    }

<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
<Skript>
  neuer Vue({
    el: '#app',
    Daten: {
      groupListCol3: [],
      GruppenlisteSpalte4: []
    },
    erstellt () {
      lass Liste = [
        {Name: 'A'},
        {name: 'B'},
        {name: 'C'},
        {name: 'D'},
        {name: 'E'},
        {name: 'F'},
        {name: 'G'},
        {name: 'H'},
        {name: 'Ich'},
        {name: 'J'},
        {name: 'K'},
        {name: 'L'}
      ]
      wenn (Listenlänge > 6) {
        diese.groupListCol3 = list.slice(0, 6)
        diese.groupListCol4 = list.slice(6)
      } anders {
        this.groupListCol3 = Liste
      }
    }
  })
</Skript>