GridContainer
GridContainer component needs to be used with the GridRow and GridColumn components.
Examples
Default grid
/demos/grid/default.vue
<template>
<article>
<veui-grid-container>
<veui-grid-row class="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 class="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 class="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>
article {
padding: 10px 12px;
}
.row {
& + & {
margin: 2px 0; /* Just for showcase */
}
}
.content {
background-color: #eee;
height: 100%;
line-height: 60px;
border-radius: 2px;
text-align: center;
}
</style>
Fixed grid
/demos/grid/fixed.vue
<template>
<article>
<veui-grid-container
:columns="12"
:gutter="10"
:margin="0"
>
<veui-grid-row class="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 class="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 */
padding: 10px 12px;
}
.row {
& + & {
margin: 2px 0; /* Just for showcase */
}
}
.content {
background-color: #eee;
height: 100%;
line-height: 60px;
border-radius: 2px;
text-align: center;
}
</style>
API
Props
| Name | Type | Default | Description |
|---|---|---|---|
columns | number | gridcontainer.columns | Number of columns in the grid. |
margin | number | gridcontainer.margin | Margin on both sides of the grid, in pixels. |
gutter | number | gridcontainer.gutter | Spacing between columns in the grid, in pixels. |
width | number | - | When creating a fixed layout, the width of the container in pixels. |
Slots
| Name | Description |
|---|---|
default | The layout content, onlyGridRow components can be direct children. |
Configs
| Key | Type | Default | Description |
|---|---|---|---|
gridcontainer.columns | number | 12 | Number of columns in the grid. |
gridcontainer.gutter | number | 30 | Spacing between columns in the grid, in pixels. |
gridcontainer.margin | number | 0 | Margin on both sides of the grid, in pixels. |
Default configs in veui-theme-dls
| Key | Type | Default |
|---|---|---|
gridcontainer.columns | number | 24 |
gridcontainer.gutter | number | 20 |
gridcontainer.margin | number | 20 |