# Grid 布局

请扫码查看示例

# 介绍

栅格布局。栅格布局通过 Grid 以及 GridCell 组件进行配合完成。

# 引入

通过以下方式来引入组件

使用包管理器安装mui-minix 组件库。如： npm i mui-minix -S;
在要使用该组件的页面中使用element标签引入该组件。

# 代码演示

# 基本用法

通过设置 Grid 组件的 rows columns 定义需要显示的行数以及列数。通过设置 GridCell 的 row column 属性控制该单元格所在行与列。

<element name="m-grid" src="@/node_modules/mui-minix/src/grid/index"></element>
<element name="m-grid-cell" src="@/node_modules/mui-minix/src/grid-cell/index"></element>
<m-grid rows="{{2}}" columns="{{2}}">
  <m-grid-cell row="{{1}}" column="{{1}}">
    <div class="h-50 wp-100 b-brand"></div>
  </m-grid-cell>
  <m-grid-cell row="{{1}}" column="{{2}}">
    <div class="h-50 wp-100 b-purple"></div>
  </m-grid-cell>
  <m-grid-cell row="{{2}}" column="{{1}}">
    <div class="h-50 wp-100 b-blue-purple"></div>
  </m-grid-cell>
  <m-grid-cell row="{{2}}" column="{{2}}">
    <div class="h-50 wp-100 b-blue"></div>
  </m-grid-cell>
</m-grid>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

.h-50{
  height: 50px;
}

.wp-100{
  width: 100%;
}

.b-brand{
  background-color: #267aff;
}

.b-purple{
  background-color: #995efc;
}

.b-blue-purple{
  background-color: #6575ff;
}

.b-blue{
  background-color: #29c3ff;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# 设置单元格空隙

通过设置 Grid 的 row-gap column-gap 来设置行间空隙，以及列间空隙。

<element name="m-grid" src="@/node_modules/mui-minix/src/grid/index"></element>
<element name="m-grid-cell" src="@/node_modules/mui-minix/src/grid-cell/index"></element>
<m-grid rows="{{2}}" columns="{{2}}" row-gap="{{10}}" column-gap="{{10}}">
  <m-grid-cell row="{{1}}" column="{{1}}">
    <div class="h-50 wp-100 b-brand"></div>
  </m-grid-cell>
  <m-grid-cell row="{{1}}" column="{{2}}">
    <div class="h-50 wp-100 b-purple"></div>
  </m-grid-cell>
  <m-grid-cell row="{{2}}" column="{{1}}">
    <div class="h-50 wp-100 b-blue-purple"></div>
  </m-grid-cell>
  <m-grid-cell row="{{2}}" column="{{2}}">
    <div class="h-50 wp-100 b-blue"></div>
  </m-grid-cell>
</m-grid>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

.h-50{
  height: 50px;
}

.wp-100{
  width: 100%;
}

.b-brand{
  background-color: #267aff;
}

.b-purple{
  background-color: #995efc;
}

.b-blue-purple{
  background-color: #6575ff;
}

.b-blue{
  background-color: #29c3ff;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# Api

# Grid

# Prop

字段	说明	类型	默认值	是否必须
`columns`	列数	`number`	`3`	`否`
`rows`	行数	`number`	`1`	`否`
`column-gap`	列间隙	`number`	`0`	`否`
`row-gap`	行间隙	`number`	`0`	`否`

# GridCell

# Prop

字段	说明	类型	默认值	是否必须
`row`	行索引	`number`	`1`	`否`
`column`	列索引	`number`	`1`	`否`
`row-span`	跨行数	`number`	`0`	`否`
`column-span`	跨列数	`number`	`0`	`否`