Grid System: 等幅に分割

ブロックA
ブロックB
ブロックC
ブロック1
ブロック2
ブロック3
ブロック4

    .row {
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      margin-right: -15px;
      margin-left: -15px;
    }
      
    .col {
      -ms-flex-preferred-size: 0;
      flex-basis: 0; /* フレックスアイテムの基本の幅を指定する */
      -ms-flex-positive: 1;
      flex-grow: 1; /* レックスコンテナ内のアイテムの伸び方の比率を指定する */
      max-width: 100%;
    }

    .col-3 {
      -ms-flex: 0 0 25%;
      flex: 0 0 25%; /* 値を3つ指定: flex-grow | flex-shrink | flex-basis */
      max-width: 25%;
    }
  

ブロックA:
col-2
ブロックB:
col-3
ブロックC:
col-7
ブロックA:
col-5
ブロックB:
col-3