Grid 宫格组件
宫格组件(Grid)与 24 列栅格布局不同的是,栅格组件(Row、Col)可以自定义一行内的列数,及各列所占比例,宫格组件则是将每行等分为宽度相等的列,甚至可以将单元格设置为正方形,并支持动态适应屏幕,就像九宫格一样。
基础用法
宫格共包含两个组件:Grid
和 GridItem
。
设置 Grid
属性 col
可以指定最大支持的列数
宽高一致
设置属性 border
可以控制是否显示边框,默认为显示(true)。
是否显示边框
设置属性 square
为 true
,宫格的高度会与宽度一致,并会自动适应窗口的改变。
Props
属性 | 描述 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
mode | 布局方式 | string | flex/grid | grid |
cols | 列数 | number | — | 3 |
border | 是否显示边框 | Boolean | — | true |
square | 是否宽高一致 | Boolean | — | false |