Element3

Appearance

Return to top
On this page

Grid 栅格

基于 CSS Grid，响应式，远离 IE。

基础用法 

<template>
  <el-grid :x-gap="12" :cols="4">
    <el-grid-item>
      <div class="light-blue" />
    </el-grid-item>
    <el-grid-item>
      <div class="blue" />
    </el-grid-item>
    <el-grid-item>
      <div class="light-blue" />
    </el-grid-item>
    <el-grid-item>
      <div class="blue" />
    </el-grid-item>
  </el-grid>
</template>

<style scoped>
.light-blue {
  height: 108px;
  background-color: #409eff;
}
.blue {
  height: 108px;
  background-color: #66b1ff;
}
</style>

间隔

设定水平、垂直间隔。

<template>
  <el-grid :x-gap="12" :y-gap="12" :cols="4">
    <el-grid-item>
      <div class="light-blue" />
    </el-grid-item>
    <el-grid-item>
      <div class="blue" />
    </el-grid-item>
    <el-grid-item>
      <div class="light-blue" />
    </el-grid-item>
    <el-grid-item>
      <div class="blue" />
    </el-grid-item>
    <el-grid-item>
      <div class="light-blue" />
    </el-grid-item>
    <el-grid-item>
      <div class="blue" />
    </el-grid-item>
    <el-grid-item>
      <div class="light-blue" />
    </el-grid-item>
    <el-grid-item>
      <div class="blue" />
    </el-grid-item>
  </el-grid>
</template>

<style scoped>
.light-blue {
  height: 108px;
  background-color: #409eff;
}
.blue {
  height: 108px;
  background-color: #66b1ff;
}
</style>

偏移

设定水平、垂直间隔。

<template>
  <el-grid :x-gap="12" :cols="4">
    <el-grid-item :offset="1">
      <div class="light-blue" />
    </el-grid-item>
    <el-grid-item :offset="1">
      <div class="blue" />
    </el-grid-item>
  </el-grid>
</template>

<style scoped>
.light-blue {
  height: 108px;
  background-color: #409eff;
}
.blue {
  height: 108px;
  background-color: #66b1ff;
}
</style>

Grid Attributes

参数说明类型可选值默认值
cols显示栅格的数量string | number—24
x-gap横向间隔槽number | string—0
y-gap纵向间隔槽number | string—0

GridItem Attributes

参数说明类型可选值默认值
offset栅格左侧的间隔格数string | number—0