/* 栅格系统 */
.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -10rpx;
  margin-left: -10rpx;
}

.col {
  padding-right: 10rpx;
  padding-left: 10rpx;
  position: relative;
  width: 100%;
  box-sizing: border-box;
}

/* 1-12列栅格 */
.col-1 { width: 8.333333%; }
.col-2 { width: 16.666667%; }
.col-3 { width: 25%; }
.col-4 { width: 33.333333%; }
.col-5 { width: 41.666667%; }
.col-6 { width: 50%; }
.col-7 { width: 58.333333%; }
.col-8 { width: 66.666667%; }
.col-9 { width: 75%; }
.col-10 { width: 83.333333%; }
.col-11 { width: 91.666667%; }
.col-12 { width: 100%; }

/* 间距 */
.row-no-gutters {
  margin-right: 0;
  margin-left: 0;
}

.row-no-gutters > .col {
  padding-right: 0;
  padding-left: 0;
}

/* 对齐方式 */
.row-start { justify-content: flex-start; }
.row-center { justify-content: center; }
.row-end { justify-content: flex-end; }
.row-between { justify-content: space-between; }
.row-around { justify-content: space-around; }

.row-top { align-items: flex-start; }
.row-middle { align-items: center; }
.row-bottom { align-items: flex-end; }

/* 排序与偏移 */
.col-order-1 { order: 1; }
.col-order-2 { order: 2; }
.col-order-3 { order: 3; }

.col-offset-1 { margin-left: 8.333333%; }
.col-offset-2 { margin-left: 16.666667%; }
.col-offset-3 { margin-left: 25%; }
.col-offset-6 { margin-left: 50%; }