Minimalist UI

Grid 网格

引入组件

<template>
  <div>
    <m-row>
      <m-col :span="8"><div></div></m-col>
      <m-col :span="8"><div></div></m-col>
      <m-col :span="8"><div></div></m-col>
    </m-row>
  </div>
</template>

<script>
  import { MRow, MCol } from "@csr/m_ui";
  export default {
    components: {
      MRow,
      MCol
    }
  }
</script>

基础用法
代码
<m-row>
  <m-col :span="24"><div class="box dark"></div></m-col>
</m-row>
<m-row>
  <m-col :span="12"><div class="box dark"></div></m-col>
  <m-col :span="12"><div class="box light"></div></m-col>
</m-row>
<m-row>
  <m-col :span="8"><div class="box light"></div></m-col>
  <m-col :span="8"><div class="box dark"></div></m-col>
  <m-col :span="8"><div class="box light"></div></m-col>
</m-row>
<m-row>
  <m-col :span="6"><div class="box light"></div></m-col>
  <m-col :span="6"><div class="box dark"></div></m-col>
  <m-col :span="6"><div class="box light"></div></m-col>
  <m-col :span="6"><div class="box dark"></div></m-col>
</m-row>
<m-row>
  <m-col :span="4"><div class="box light"></div></m-col>
  <m-col :span="4"><div class="box dark"></div></m-col>
  <m-col :span="4"><div class="box light"></div></m-col>
  <m-col :span="4"><div class="box dark"></div></m-col>
  <m-col :span="4"><div class="box light"></div></m-col>
  <m-col :span="4"><div class="box dark"></div></m-col>
</m-row>

分栏间隔
代码
<m-row :gutter="20">
  <m-col :span="8"><div class="box dark"></div></m-col>
  <m-col :span="8"><div class="box dark"></div></m-col>
  <m-col :span="8"><div class="box dark"></div></m-col>
</m-row>
<m-row :gutter="10">
  <m-col :span="6"><div class="box dark"></div></m-col>
  <m-col :span="6"><div class="box dark"></div></m-col>
  <m-col :span="6"><div class="box dark"></div></m-col>
  <m-col :span="6"><div class="box dark"></div></m-col>
</m-row>

分栏偏移
代码
<m-row>
  <m-col :span="6"><div class="box dark"></div></m-col>
  <m-col :span="6" :offset="6"><div class="box dark"></div></m-col>
</m-row>
<m-row>
  <m-col :span="6" :offset="6"><div class="box dark"></div></m-col>
  <m-col :span="6" :offset="6"><div class="box dark"></div></m-col>
</m-row>
<m-row>
  <m-col :span="12" :offset="12"><div class="box dark"></div></m-col>
</m-row>

对齐方式
代码
<m-row :gutter="10" align="left">
  <m-col :span="6"><div class="box dark"></div></m-col>
  <m-col :span="6"><div class="box dark"></div></m-col>
  <m-col :span="6"><div class="box dark"></div></m-col>
</m-row>
<m-row :gutter="10" align="right">
  <m-col :span="6"><div class="box dark"></div></m-col>
  <m-col :span="6"><div class="box dark"></div></m-col>
  <m-col :span="6"><div class="box dark"></div></m-col>
</m-row>
<m-row :gutter="10" align="center">
  <m-col :span="6"><div class="box dark"></div></m-col>
  <m-col :span="6"><div class="box dark"></div></m-col>
  <m-col :span="6"><div class="box dark"></div></m-col>
</m-row>
<m-row :gutter="10" align="space-between">
  <m-col :span="6"><div class="box dark"></div></m-col>
  <m-col :span="6"><div class="box dark"></div></m-col>
  <m-col :span="6"><div class="box dark"></div></m-col>
</m-row>
<m-row :gutter="10" align="space-around">
  <m-col :span="6"><div class="box dark"></div></m-col>
  <m-col :span="6"><div class="box dark"></div></m-col>
  <m-col :span="6"><div class="box dark"></div></m-col>
</m-row>

响应式布局
代码
<m-row>
  <m-col
    :sm="{span: 24}" :md="{span: 4}" :lg="{span: 6}"
    :xl="{span: 8}" :xxl="{span: 10}"
  >
    <div class="box dark"></div>
  </m-col>
  <m-col
    :sm="{span: 24}" :md="{span: 18, offset: 2}"
    :lg="{span: 15, offset: 3}" :xl="{span: 12, offset: 4}"
    :xxl="{span: 8, offset: 6}"
  >
    <div class="box dark"></div>
  </m-col>
</m-row>

API

MRow

属性说明类型默认值
gutter 栅格间隔 string | number
align 对齐方式，可选值：left，right，center，space-between，space-around string

MCol

属性说明类型默认值
span 栅格占据的列数 string | number 24
offset 栅格偏移列数 number | string
sm ≥576px 响应式栅格占据的列数和偏移列数，例如：{span: 12, offset: 12} object
md ≥768px 响应式栅格占据的列数和偏移列数，例如：{span: 12, offset: 12} object
lg ≥992px 响应式栅格占据的列数和偏移列数，例如：{span: 12, offset: 12} object
xl ≥1200px 响应式栅格占据的列数和偏移列数，例如：{span: 12, offset: 12} object
xxl ≥1600px 响应式栅格占据的列数和偏移列数，例如：{span: 12, offset: 12} object

← Layout 布局 →