iDesign

Grid 栅格

24 栅格系统是以规则的网格阵列来规范页面中的模块布局及信息分布，提高界面布局的一致性。

基本用法

使用 Grid 包裹栅格的每一项 Grid.Item。

Grid.Item 的 span 属性值使用 0（不显示）到 24（默认值）的值来表示其跨越范围。例如，三个等宽的列可以使用 <Grid.Item span={8}> 来创建。

如果一个 Grid 中 Grid.Item 的 span 总和超过 24，那么多余的 Grid.Item 会作为一个整体另起一行排列。

GridItem1
GridItem2
GridItem3
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
2
2
2
2
2
2
2
2
2
2
2
2
3
3
3
3
3
3
3
3
4
4
4
4
4
4
6
6
6
6
8
8
8
12
12
24
span8
span8
span12
<template>
  <!-- 直接使用 -->
  <i-grid>
    <i-grid-item :span="8">
      <div>GridItem1</div>
    </i-grid-item>
    <i-grid-item :span="8">
      <div>GridItem2</div>
    </i-grid-item>
    <i-grid-item :span="8">
      <div>GridItem3</div>
    </i-grid-item>
  </i-grid>

  <!-- 遍历使用 -->
  <i-grid v-for="(grid, i) in demoData" :key="i">
    <i-grid-item v-for="(item, j) in grid" :span="item" :key="j">
      <div>{{ item }}</div>
    </i-grid-item>
  </i-grid>

  <!-- span 总和超出换行 -->
  <i-grid>
    <i-grid-item :span="8">
      <div>span8</div>
    </i-grid-item>
    <i-grid-item :span="8">
      <div>span8</div>
    </i-grid-item>
    <i-grid-item :span="12">
      <div>span12</div>
    </i-grid-item>
  </i-grid>
</template>

<script setup>
const demoData = [
  Array(24).fill(1),
  Array(12).fill(2),
  Array(8).fill(3),
  Array(6).fill(4),
  Array(4).fill(6),
  Array(3).fill(8),
  Array(2).fill(12),
  Array(1).fill(24)
]
</script>
显示代码

自定义单项宽度

Grid.Item 的 width 属性值可以设置单项固定宽度，width 为具体的宽度且优先级高于 span，而 span 设置的宽度为间隔格数（0 - 24）

GridItem1
GridItem2
GridItem3
GridItem4
GridItem5
GridItem6
<template>
  <i-grid>
    <i-grid-item :span="4">
      <div>GridItem1</div>
    </i-grid-item>
    <i-grid-item :width="100">
      <div>GridItem2</div>
    </i-grid-item>
    <i-grid-item width="auto">
      <div>GridItem3</div>
    </i-grid-item>
    <i-grid-item :span="4" :width="120">
      <div>GridItem4</div>
    </i-grid-item>
    <i-grid-item :span="4">
      <div>GridItem5</div>
    </i-grid-item>
    <i-grid-item>
      <div>GridItem6</div>
    </i-grid-item>
  </i-grid>
</template>
显示代码

区块间隔

Grid 的 gutter 属性值可以全局设置栅格中每一项的左右内边距。例如，<Grid gutter={16}> 将会为每一项 Grid.Item 添加左右内边距为 8px。

GridItem1
GridItem2
GridItem3
GridItem4
GridItem1
GridItem2
GridItem3
GridItem4
GridItem1
GridItem2
GridItem3
GridItem4
<template>
  <i-grid :gutter="0">
    <i-grid-item :span="4">
      <div>GridItem1</div>
    </i-grid-item>
    <i-grid-item :span="4">
      <div>GridItem2</div>
    </i-grid-item>
    <i-grid-item :span="4">
      <div>GridItem3</div>
    </i-grid-item>
    <i-grid-item :span="4">
      <div>GridItem4</div>
    </i-grid-item>
  </i-grid>

  <i-grid :gutter="16">
    <i-grid-item :span="4">
      <div>GridItem1</div>
    </i-grid-item>
    <i-grid-item :span="4">
      <div>GridItem2</div>
    </i-grid-item>
    <i-grid-item :span="4">
      <div>GridItem3</div>
    </i-grid-item>
    <i-grid-item :span="4">
      <div>GridItem4</div>
    </i-grid-item>
  </i-grid>

  <i-grid :gutter="32">
    <i-grid-item :span="4">
      <div>GridItem1</div>
    </i-grid-item>
    <i-grid-item :span="4">
      <div>GridItem2</div>
    </i-grid-item>
    <i-grid-item :span="4">
      <div>GridItem3</div>
    </i-grid-item>
    <i-grid-item :span="4">
      <div>GridItem4</div>
    </i-grid-item>
  </i-grid>
</template>
显示代码

单项左侧间距

Grid.Item 的 offset 属性值可以单独设置该项的左侧外边距，单位为间隔格数。例如，<Grid.Item offset={2}> 将会向右偏移 2 个间隔的距离。

GridItem1
GridItem2
GridItem3
GridItem4
GridItem1
GridItem2
GridItem3
GridItem4
GridItem1
GridItem2
GridItem3
GridItem4
<template>
  <i-grid>
    <i-grid-item :span="4">
      <div>GridItem1</div>
    </i-grid-item>
    <i-grid-item :span="4">
      <div>GridItem2</div>
    </i-grid-item>
    <i-grid-item :span="4">
      <div>GridItem3</div>
    </i-grid-item>
    <i-grid-item :span="4">
      <div>GridItem4</div>
    </i-grid-item>
  </i-grid>

  <i-grid>
    <i-grid-item :span="4">
      <div>GridItem1</div>
    </i-grid-item>
    <i-grid-item :span="4" :offset="2">
      <div>GridItem2</div>
    </i-grid-item>
    <i-grid-item :span="4">
      <div>GridItem3</div>
    </i-grid-item>
    <i-grid-item :span="4">
      <div>GridItem4</div>
    </i-grid-item>
  </i-grid>

  <i-grid :gutter="16">
    <i-grid-item :span="4">
      <div>GridItem1</div>
    </i-grid-item>
    <i-grid-item :span="4" :offset="2">
      <div>GridItem2</div>
    </i-grid-item>
    <i-grid-item :span="4">
      <div>GridItem3</div>
    </i-grid-item>
    <i-grid-item :span="4">
      <div>GridItem4</div>
    </i-grid-item>
  </i-grid>
</template>
显示代码

栅格水平排列方式

Grid 的 justify 属性值可以全局设置栅格水平的排版。

start

GridItem1
GridItem2
GridItem3
GridItem4

center

GridItem1
GridItem2
GridItem3
GridItem4

end

GridItem1
GridItem2
GridItem3
GridItem4

space-between

GridItem1
GridItem2
GridItem3
GridItem4

space-around

GridItem1
GridItem2
GridItem3
GridItem4
<template>
  <h4>start</h4>
  <i-grid justify="start">
    <i-grid-item :span="4">
      <div>GridItem1</div>
    </i-grid-item>
    <i-grid-item :span="4">
      <div>GridItem2</div>
    </i-grid-item>
    <i-grid-item :span="4">
      <div>GridItem3</div>
    </i-grid-item>
    <i-grid-item :span="4">
      <div>GridItem4</div>
    </i-grid-item>
  </i-grid>

  <h4>center</h4>
  <i-grid justify="center">
    <i-grid-item :span="4">
      <div>GridItem1</div>
    </i-grid-item>
    <i-grid-item :span="4">
      <div>GridItem2</div>
    </i-grid-item>
    <i-grid-item :span="4">
      <div>GridItem3</div>
    </i-grid-item>
    <i-grid-item :span="4">
      <div>GridItem4</div>
    </i-grid-item>
  </i-grid>

  <h4>end</h4>
  <i-grid justify="end">
    <i-grid-item :span="4">
      <div>GridItem1</div>
    </i-grid-item>
    <i-grid-item :span="4">
      <div>GridItem2</div>
    </i-grid-item>
    <i-grid-item :span="4">
      <div>GridItem3</div>
    </i-grid-item>
    <i-grid-item :span="4">
      <div>GridItem4</div>
    </i-grid-item>
  </i-grid>

  <h4>space-between</h4>
  <i-grid justify="space-between">
    <i-grid-item :span="4">
      <div>GridItem1</div>
    </i-grid-item>
    <i-grid-item :span="4">
      <div>GridItem2</div>
    </i-grid-item>
    <i-grid-item :span="4">
      <div>GridItem3</div>
    </i-grid-item>
    <i-grid-item :span="4">
      <div>GridItem4</div>
    </i-grid-item>
  </i-grid>

  <h4>space-around</h4>
  <i-grid justify="space-around">
    <i-grid-item :span="4">
      <div>GridItem1</div>
    </i-grid-item>
    <i-grid-item :span="4">
      <div>GridItem2</div>
    </i-grid-item>
    <i-grid-item :span="4">
      <div>GridItem3</div>
    </i-grid-item>
    <i-grid-item :span="4">
      <div>GridItem4</div>
    </i-grid-item>
  </i-grid>
</template>
显示代码

栅格垂直对齐方式

Grid 的 align 属性值可以全局设置栅格中每一项的垂直对齐方式，而 Grid.Item 可通过 align 属性值单独设置该项的垂直对齐方式，优先级更高。

top

GridItem1
GridItem2
GridItem3
GridItem4

middle

GridItem1
GridItem2
GridItem3
GridItem4

bottom

GridItem1
GridItem2
GridItem3
GridItem4

单项对齐设置

GridItem1
AlignTop2
GridItem3
GridItem4
<template>
  <h4>top</h4>
  <i-grid align="top">
    <i-grid-item :span="4">
      <div :style="{ height: '80px' }">GridItem1</div>
    </i-grid-item>
    <i-grid-item :span="4">
      <div>GridItem2</div>
    </i-grid-item>
    <i-grid-item :span="4">
      <div :style="{ height: '60px' }">GridItem3</div>
    </i-grid-item>
    <i-grid-item :span="4">
      <div>GridItem4</div>
    </i-grid-item>
  </i-grid>

  <h4>middle</h4>
  <i-grid align="middle">
    <i-grid-item :span="4">
      <div :style="{ height: '80px' }">GridItem1</div>
    </i-grid-item>
    <i-grid-item :span="4">
      <div>GridItem2</div>
    </i-grid-item>
    <i-grid-item :span="4">
      <div :style="{ height: '60px' }">GridItem3</div>
    </i-grid-item>
    <i-grid-item :span="4">
      <div>GridItem4</div>
    </i-grid-item>
  </i-grid>

  <h4>bottom</h4>
  <i-grid align="bottom">
    <i-grid-item :span="4">
      <div :style="{ height: '80px' }">GridItem1</div>
    </i-grid-item>
    <i-grid-item :span="4">
      <div>GridItem2</div>
    </i-grid-item>
    <i-grid-item :span="4">
      <div :style="{ height: '60px' }">GridItem3</div>
    </i-grid-item>
    <i-grid-item :span="4">
      <div>GridItem4</div>
    </i-grid-item>
  </i-grid>

  <h4>单项对齐设置</h4>
  <i-grid align="bottom">
    <i-grid-item :span="4">
      <div :style="{ height: '80px' }">GridItem1</div>
    </i-grid-item>
    <i-grid-item :span="4" align="top">
      <div>AlignTop2</div>
    </i-grid-item>
    <i-grid-item :span="4">
      <div :style="{ height: '60px' }">GridItem3</div>
    </i-grid-item>
    <i-grid-item :span="4">
      <div>GridItem4</div>
    </i-grid-item>
  </i-grid>
</template>
显示代码

自定义单项排序

Grid.Item 的 order 属性值可以设置单项在整个栅格中的次序。

1
2
3
4
5
6
7
8
9
10
<template>
  <i-grid :gutter="10">
    <i-grid-item :span="2">
      <div>1</div>
    </i-grid-item>
    <i-grid-item :span="2">
      <div>2</div>
    </i-grid-item>
    <i-grid-item :span="2" :order="4">
      <div>3</div>
    </i-grid-item>
    <i-grid-item :span="2" :order="3">
      <div>4</div>
    </i-grid-item>
    <i-grid-item :span="2" :order="3">
      <div>5</div>
    </i-grid-item>
    <i-grid-item :span="2" :order="2">
      <div>6</div>
    </i-grid-item>
    <i-grid-item :span="2" :order="1">
      <div>7</div>
    </i-grid-item>
    <i-grid-item :span="2" :order="0">
      <div>8</div>
    </i-grid-item>
    <i-grid-item :span="2">
      <div>9</div>
    </i-grid-item>
    <i-grid-item :span="2">
      <div>10</div>
    </i-grid-item>
  </i-grid>
</template>
显示代码

Grid Attributes

属性说明类型默认值
justify栅格水平排列方式"start"〡"end"〡"center"〡"space-around"〡"space-between""start"
align栅格每一项的全局垂直对齐方式"top"〡"middle"〡"bottom""top"
gutter栅格每一项间的全局间隔number0

GridItem Attributes

属性说明类型默认值
span栅格宽度占比number24
width栅格单项宽度值number〡string--
align栅格单项的垂直对齐方式"top"〡"middle"〡"bottom""top"
offset栅格单项的左侧外边距number0
order栅格单项次序number0
Last Updated:
Contributors: Leophen