/**
 * Grid 组件样式 - 对应 MUI Grid
 */

.MuiGrid-root {
  box-sizing: border-box;
}

/* 容器模式 */
.MuiGrid-container {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

/* 项目模式 */
.MuiGrid-item {
  box-sizing: border-box;
}

/* 方向 */
.MuiGrid-direction-row {
  flex-direction: row;
}

.MuiGrid-direction-column {
  flex-direction: column;
}

.MuiGrid-direction-row-reverse {
  flex-direction: row-reverse;
}

.MuiGrid-direction-column-reverse {
  flex-direction: column-reverse;
}

/* 换行 */
.MuiGrid-wrap-wrap {
  flex-wrap: wrap;
}

.MuiGrid-wrap-nowrap {
  flex-wrap: nowrap;
}

.MuiGrid-wrap-wrap-reverse {
  flex-wrap: wrap-reverse;
}

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

.MuiGrid-size-auto { flex-basis: auto; max-width: none; }
.MuiGrid-size-grow { flex-grow: 1; flex-basis: 0; }