GridContainer

GridContainer is required to be used with GridRow and GridColumn.

Demos

Default grid

/demos/grid/default.vue

8/24

16/24

6/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>

Fixed-width grid

/demos/grid/fixed.vue

3/12

9/12

4/12

<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

Props

Name	Type	Default	Description
`columns`	`number`	`gridcontainer.columns`	The number of columns.
`margin`	`number`	`gridcontainer.margin`	Margin around both sides of the grid container in `px`.
`gutter`	`number`	`gridcontainer.gutter`	Gutter between adjacent grid columns in `px`.
`width`	`number`	-	The width of the grid container in `px` when creating fixed-width grids.
`flex`	`boolean`	`gridcontainer.flex`	Whether to apply flex layout to make the columns share the same height. Flex layout is not supported in IE9 so this feature will not work there.

Slots

Name	Description
`default`	The content of the grid. Can only have `GridRow` components as direct children.

Global config

Key	Type	Default	Description
`gridcontainer.columns`	`number`	`12`	The number of columns.
`gridcontainer.gutter`	`number`	`30`	Gutter between adjacent grid columns in `px`.
`gridcontainer.margin`	`number`	`0`	Margin around both sides of the grid container in `px`.
`gridcontainer.flex`	`boolean`	`false`	Whether to apply flex layout.

Default config in `veui-theme-one`

Key	Type	Default
`gridcontainer.columns`	`number`	`24`
`gridcontainer.gutter`	`number`	`20`
`gridcontainer.margin`	`number`	`20`

GridContainer

Demos

Default grid

Fixed-width grid

API

Props

Slots

Global config

Default config in veui-theme-one

Default config in `veui-theme-one`