icon: ''
import_code: import { Grid, GridItem } from 'vux'
category:
  en: Layout
  'zh-CN': 布局
tags:
  en:
    - grid
    - layout
  zh-CN:
    - 宫格
    - 九宫格
    - 布局
items:
  - grid
  - grid-item
extra: |

  ``` html
  <grid>
    <grid-item label="Grid" v-for="i in 9">
      <img slot="icon" src="../assets/grid_icon.png">
    </grid-item>
  </grid>
  ```
grid:
  props:
    rows:
      type: Number
      version: v2.2.0
      default: 3
      en: (deprecated after v2.6.0) the number of rows. Less than 5 will be better
      zh-CN: (v2.6.0 之后废弃，使用 col 替代)宫格行数，建议少于`5`
    cols:
      type: Number
      version: v2.6.1
      default: 3
      en: the number of columns. if there is more than one row in grid, need to set cols value, otherwise all grid items will show in one row with the same width
      zh-CN: 列数。如果为非单行 Grid，需要设置 cols，否则所有 GridItem 会平均宽度显示在一行。
    show-lr-borders:
      type: Boolean
      version: v2.8.1
      default: true
      en: whether show left and right borders
      zh-CN: 是否显示左右边框
    show-vertical-dividers:
      type: Boolean
      version: v2.8.1
      default: true
      en: whether show vertical dividers
      zh-CN: 是否显示垂直分割线
  slots:
    default:
      en: 'default slot for `grid-item` list'
      zh-CN: 用于`grid-item`的插槽
grid-item:
  props:
    icon:
      en: 'icon url. if using local resources, it is better to use `slot=icon`'
      zh-CN: '图标地址，如果是线上地址，推荐使用该prop。如果是本地图标资源，使用`slot=icon`可以保证资源被正确打包'
    label:
      en: '`label` text'
      zh-CN: '`label` 文字'
    link:
      en: vue-router's path
      zh-CN: vue-router 路径
  slots:
    icon:
      en: 'icon slot, use tag:`img`'
      zh-CN: "图标内容，直接使用`img`标签"
    label:
      en: slot for label, the same func as prop:label
      zh-CN: label 文字的 slot，作用同 prop:label
changes:
  v2.8.1:
    en:
      - '[feature] add prop:show-lr-borders and prop:show-vertical-dividers #2488'
    zh-CN:
      - '[feature] 支持 prop:show-lr-borders、prop:show-vertical-dividers 用以隐藏左右边线及垂直分割线 #2488'
  v2.6.1:
    en:
      - '[feature] add `cols` props'
    zh-CN:
      - '[feature] 添加 `cols` 属性，自定义列数'
  v2.6.0:
    en:
      - '[change] prop:rows is deprecated #1971'
    zh-CN:
      - '[change] rows 属性已经废弃，使用自动计算 #1971'
  v2.2.0:
    en:
      - '[feature] Support dynamic rows'
      - '[enhance] Hide slot:icon and slot:label if not being set'
    zh-CN:
      - '[feature] 支持定义列数'
      - '[enhance] 如果没有使用 icon 和 label，则直接隐藏 slot:icon 和 slot:label'
  v2.0.14:
    en:
      - '[feature] Add component `grid`'
    zh-CN:
      - '[feature] 增加`grid`九宫格组件'