GridContainer
GridContainer is required to be used with GridRow and GridColumn.
Demos
Default grid
/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 */
}
}
.content {
background-color: #eee;
height: 100%;
line-height: 60px;
border-radius: 2px;
text-align: center;
}
</style>
Fixed-width grid
/demos/grid/fixed.vue
3/12
9/12
4/12
4/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 */
}
}
.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 | 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. |
Slots
| Name | Description |
|---|---|
default | The content of the grid. Can only have GridRow components as direct children. |
Configs
| 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. |
Default config in veui-theme-dls
| Key | Type | Default | |
|---|---|---|---|
gridcontainer.columns | number | 24 | |
gridcontainer.gutter | number | 20 | |
gridcontainer.margin | number | 20 |