docs_vue2/one/docs/components/grid-container.md

1.4 KiB

GridContainer 栅格容器

:::tip GridContainer 组件需要配合 GridRowGridColumn 组件使用。 :::

示例

默认栅格

定宽栅格

API

属性

名称 类型 默认值 描述
columns number= gridcontainer.columns 栅格列数。
margin number= gridcontainer.margin 栅格两侧边距 px 数值。
gutter number= gridcontainer.gutter 栅格列间距 px 数值。
width number= - 当需要创建定宽布局时,用来传入容器宽度 px 数值。

插槽

名称 描述
default 布局内容,直接子组件只能包含 GridRow 组件。

全局配置

配置项 类型 默认值 描述
gridcontainer.columns number 12 栅格列数。
gridcontainer.gutter number 30 栅格列间距 px 数值。
gridcontainer.margin number 0 栅格两侧边距 px 数值。

veui-theme-dls 中的默认配置

配置项 类型 默认值
gridcontainer.columns number 24
gridcontainer.gutter number 20
gridcontainer.margin number 20