VEUI

VEUI on GitHub
中文

GridContainer

Demos

Default grid

/demos/grid/default.vue
Edit this demo on GitHubEdit
<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>
article {
  padding: 10px 12px;
}

.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
Edit this demo on GitHubEdit
<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 */
  padding: 10px 12px;
}

.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

NameTypeDefaultDescription
columnsnumbergridcontainer.columnsThe number of columns.
marginnumbergridcontainer.marginMargin around both sides of the grid container in px.
gutternumbergridcontainer.gutterGutter between adjacent grid columns in px.
widthnumber-The width of the grid container in px when creating fixed-width grids.

Slots

NameDescription
defaultThe content of the grid. Can only have GridRow components as direct children.

Configs

KeyTypeDefaultDescription
gridcontainer.columnsnumber12The number of columns.
gridcontainer.gutternumber30Gutter between adjacent grid columns in px.
gridcontainer.marginnumber0Margin around both sides of the grid container in px.

Default config in veui-theme-dls

KeyTypeDefault
gridcontainer.columnsnumber24
gridcontainer.gutternumber20
gridcontainer.marginnumber20
Edit this page on GitHubEdit
© Baidu, Inc. 2023