// basic grid styles

$base-col: 8.333333%

// container
.grid
  display: flex
  flex-wrap: wrap // 使得 flex-grow: 0; flex-basis: 100% 生效时 flex item 独占一行
  &.no-wrap
    flex-wrap: nowrap

  &.col
    flex-direction: column

  &.cr
    flex-direction: column-reverse

  &.row
    flex-direction: row

  &.rr
    flex-direction: row-reverse

// per item
.grid-cell
  flex: 1

@for $i from 1 through 12
  .grid-cell-#{$i}
    flex-grow: 0
    flex-basis: $base-col * $i
    max-width: $base-col * $i // ! 防止内容撑开容器，必须设置