原创文章，未经允许，请勿转载

/*less*/

@gap: 10px;  /*空隙*/

.grid {
  box-sizing: border-box;
  background-color: #eee;
  display: flex;
  flex-wrap: wrap;
  padding: @gap/2;
  &>* {
    box-sizing: border-box;
    margin: @gap/2;
  }
  .full {
    flex: 0 0 calc(100% - @gap);
  }
  .half {
    flex: 0 0 calc(50% - @gap);
   }
  .third {
    flex: 0 0 calc(33.33333% - @gap);
  }
  .two-third {
    flex: 0 0 calc(66.66666% - @gap);
  }
  .fourth {
    flex: 0 0 calc(25% - @gap);
  }
}

来源：悠游悠游，2019-08-02，原文地址：https://yymmss.com/p/grid-system.html