GridContainer 栅格容器

GridContainer 组件需要配合 GridRow 及 GridColumn 组件使用。

示例

默认栅格

/demos/grid/default.vue
8/24
16/24
6/24
6/24
6/24
6/24
12/24
12/24 
<template>
<article>
  <veui-grid-container>
    <veui-grid-row>
      <veui-grid-column :span="8">
        <div class="content">
          8/24
        </div>
      </veui-grid-column>
      <veui-grid-column :span="16">
        <div class="content">
          16/24
        </div>
      </veui-grid-column>
    </veui-grid-row>
    <veui-grid-row>
      <veui-grid-column :span="6">
        <div class="content">
          6/24
        </div>
      </veui-grid-column>
      <veui-grid-column :span="6">
        <div class="content">
          6/24
        </div>
      </veui-grid-column>
      <veui-grid-column :span="6">
        <div class="content">
          6/24
        </div>
      </veui-grid-column>
      <veui-grid-column :span="6">
        <div class="content">
          6/24
        </div>
      </veui-grid-column>
    </veui-grid-row>
    <veui-grid-row>
      <veui-grid-column :span="12">
        <div class="content">
          12/24
        </div>
      </veui-grid-column>
      <veui-grid-column :span="12">
        <div class="content">
          12/24
        </div>
      </veui-grid-column>
    </veui-grid-row>
  </veui-grid-container>
</article>
</template>

<script>
import { GridContainer, GridRow, GridColumn } from 'veui'

export default {
  components: {
    'veui-grid-container': GridContainer,
    'veui-grid-row': GridRow,
    'veui-grid-column': GridColumn
  }
}
</script>

<style lang="less" scoped>
.veui-grid-row {
  & + & {
    margin: 2px 0; /* Just for showcase */
  }
}
</style>

定宽栅格

/demos/grid/fixed.vue
3/12
9/12
4/12
4/12
4/12

可以在 GridContainer 上使用 columns/margin/gutter 调整布局参数。

<template>
<article>
  <veui-grid-container
    :columns="12"
    :gutter="10"
    :margin="0"
  >
    <veui-grid-row>
      <veui-grid-column :span="3">
        <div class="content">
          3/12
        </div>
      </veui-grid-column>
      <veui-grid-column :span="9">
        <div class="content">
          9/12
        </div>
      </veui-grid-column>
    </veui-grid-row>
    <veui-grid-row>
      <veui-grid-column :span="4">
        <div class="content">
          4/12
        </div>
      </veui-grid-column>
      <veui-grid-column :span="4">
        <div class="content">
          4/12
        </div>
      </veui-grid-column>
      <veui-grid-column :span="4">
        <div class="content">
          4/12
        </div>
      </veui-grid-column>
    </veui-grid-row>
  </veui-grid-container>
</article>
</template>

<script>
import { GridContainer, GridRow, GridColumn } from 'veui'

export default {
  components: {
    'veui-grid-container': GridContainer,
    'veui-grid-row': GridRow,
    'veui-grid-column': GridColumn
  }
}
</script>

<style lang="less" scoped>
article {
  width: 400px; /* Fixed-width container */
}

.veui-grid-row {
  & + & {
    margin: 2px 0; /* Just for showcase */
  }
}
</style>

API

属性

名称类型默认值描述
columnsnumbergridcontainer.columns栅格列数。
marginnumbergridcontainer.margin栅格两侧边距 px 数值。
gutternumbergridcontainer.gutter栅格列间距 px 数值。
widthnumber-当需要创建定宽布局时，用来传入容器宽度 px 数值。
flexbooleangridcontainer.flex

栅格是否是用 flex 布局，此时可以自动保持多列等高。

IE9 不支持 flex 布局，此功能无效。

插槽

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

全局配置

配置项类型默认值描述
gridcontainer.columnsnumber12栅格列数。
gridcontainer.gutternumber30栅格列间距 px 数值。
gridcontainer.marginnumber0栅格两侧边距 px 数值。
gridcontainer.flexbooleanfalse栅格是否是用 flex 布局。

veui-theme-one 中的默认配置

配置项类型默认值
gridcontainer.columnsnumber24
gridcontainer.gutternumber20
gridcontainer.marginnumber20