Grid 网格布局

网格布局使用 24 列栅格系统，通过Row和Col组件快速创建响应式布局。

基础用法

通过span属性设置列占据的宽度，总计 24 列。

col-24

col-12

col-12

col-8

col-8

col-8

col-6

col-6

col-6

col-6

col-4

col-4

col-4

col-4

col-4

col-4

col-3

col-3

col-3

col-3

col-3

col-3

col-3

col-3

col-2

col-2

col-2

col-2

col-2

col-2

col-2

col-2

col-2

col-2

col-2

col-2

<template>
  <Row>
    <Col :span="24"><div class="demo-box">col-24</div></Col>
  </Row>
  <Row>
    <Col :span="12"><div class="demo-box">col-12</div></Col>
    <Col :span="12"><div class="demo-box">col-12</div></Col>
  </Row>
  <Row>
    <Col :span="8"><div class="demo-box">col-8</div></Col>
    <Col :span="8"><div class="demo-box">col-8</div></Col>
    <Col :span="8"><div class="demo-box">col-8</div></Col>
  </Row>
  <Row>
    <Col :span="6"><div class="demo-box">col-6</div></Col>
    <Col :span="6"><div class="demo-box">col-6</div></Col>
    <Col :span="6"><div class="demo-box">col-6</div></Col>
    <Col :span="6"><div class="demo-box">col-6</div></Col>
  </Row>
  <Row>
    <Col :span="4"><div class="demo-box">col-4</div></Col>
    <Col :span="4"><div class="demo-box">col-4</div></Col>
    <Col :span="4"><div class="demo-box">col-4</div></Col>
    <Col :span="4"><div class="demo-box">col-4</div></Col>
    <Col :span="4"><div class="demo-box">col-4</div></Col>
    <Col :span="4"><div class="demo-box">col-4</div></Col>
  </Row>
  <Row>
    <Col :span="3"><div class="demo-box">col-3</div></Col>
    <Col :span="3"><div class="demo-box">col-3</div></Col>
    <Col :span="3"><div class="demo-box">col-3</div></Col>
    <Col :span="3"><div class="demo-box">col-3</div></Col>
    <Col :span="3"><div class="demo-box">col-3</div></Col>
    <Col :span="3"><div class="demo-box">col-3</div></Col>
    <Col :span="3"><div class="demo-box">col-3</div></Col>
    <Col :span="3"><div class="demo-box">col-3</div></Col>
  </Row>
  <Row>
    <Col :span="2"><div class="demo-box">col-2</div></Col>
    <Col :span="2"><div class="demo-box">col-2</div></Col>
    <Col :span="2"><div class="demo-box">col-2</div></Col>
    <Col :span="2"><div class="demo-box">col-2</div></Col>
    <Col :span="2"><div class="demo-box">col-2</div></Col>
    <Col :span="2"><div class="demo-box">col-2</div></Col>
    <Col :span="2"><div class="demo-box">col-2</div></Col>
    <Col :span="2"><div class="demo-box">col-2</div></Col>
    <Col :span="2"><div class="demo-box">col-2</div></Col>
    <Col :span="2"><div class="demo-box">col-2</div></Col>
    <Col :span="2"><div class="demo-box">col-2</div></Col>
    <Col :span="2"><div class="demo-box">col-2</div></Col>
  </Row>
</template>

<script setup>

</script>
<style scoped>
:root{
    --bg-color-1:rgba(100, 100, 100, 0.05);
    --border-1:1px solid rgba(231, 231, 231, 0.125);
  }

    .x-col{
        background:rgb(148, 148, 255);
    }

    .demo-box{
      display: flex;
      align-items: center;
      justify-content: center;
      color:var(--color-text-1);
      background:hsl(217.2 91.2% 59.8%);
      border:1px solid hsla(200.6,94.4%,86.1%,0.5);
      background:var(--color-bg);
      border:1px solid var(--color-default);
      color:var(--color-default);
      padding:10px;
      margin:1px 1px;
    }
</style>

列间距

通过gutter属性设置列之间的间距，单位为px。

col-6

col-6

col-6

col-6

<template>
  <Row :gutter="16">
    <Col :span="6"><div class="demo-box">col-6</div></Col>
    <Col :span="6"><div class="demo-box">col-6</div></Col>
    <Col :span="6"><div class="demo-box">col-6</div></Col>
    <Col :span="6"><div class="demo-box">col-6</div></Col>
  </Row>
</template>

<script setup></script>

响应式布局

支持五种响应式尺寸，对应不同屏幕宽度：

• xs: <576px 超小屏幕
• sm: ≥576px 小屏幕
• md: ≥768px 中等屏幕
• lg: ≥992px 大屏幕
• xl: ≥1200px 超大屏幕

可传入数字指定列宽，或对象形式指定更复杂配置：

响应式列

响应式列

响应式列

响应式列

响应式列

响应式列

<template>
  <Row>
    <Col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
      <div class="demo-box">响应式列</div>
    </Col>
    <Col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
      <div class="demo-box">响应式列</div>
    </Col>
    <Col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
      <div class="demo-box">响应式列</div>
    </Col>
    <Col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
      <div class="demo-box">响应式列</div>
    </Col>
    <Col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
      <div class="demo-box">响应式列</div>
    </Col>
    <Col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
      <div class="demo-box">响应式列</div>
    </Col>
  </Row>
</template>

<script setup></script>

列偏移

通过offset属性设置列的偏移量，实现列之间的间距控制：

col-8

col-8 offset-8

<template>
  <Row>
    <Col :span="8">
      <div class="demo-box">col-8</div>
    </Col>
    <Col :span="8" :offset="8">
      <div class="demo-box">col-8 offset-8</div>
    </Col>
  </Row>
</template>

<script setup></script>

列排序

通过push（右移）和pull（左移）属性调整列的顺序：

span: 12, push: 12（向右移动12列）

span: 12, pull: 12（向左移动12列）

<template>
  <Row :gutter="16">
    <Col :span="12" :push="12">
      <div class="demo-box">span: 12, push: 12（向右移动12列）</div>
    </Col>
    <Col :span="12" :pull="12">
      <div class="demo-box">span: 12, pull: 12（向左移动12列）</div>
    </Col>
  </Row>
</template>

<script setup></script>

对齐方式

垂直对齐

通过 Row 组件的align属性设置列的垂直对齐方式：

align: top

垂直顶部对齐

垂直顶部对齐

align: middle

垂直居中对齐

垂直居中对齐

align: bottom

垂直底部对齐

垂直底部对齐

<template>
  <Row
    align="top"
    style="
      height: 100px;
      background: var(--color-bg-hover-1);
      margin-bottom: 10px;
    "
  >
    <Col :span="8" style="height: 30px">
      <div class="demo-box">align: top</div>
    </Col>
    <Col :span="8">
      <div class="demo-box" style="height: 60px">垂直顶部对齐</div>
    </Col>
    <Col :span="8">
      <div class="demo-box" style="height: 80px">垂直顶部对齐</div>
    </Col>
  </Row>
  <Row
    align="middle"
    style="
      height: 100px;
      background: var(--color-bg-hover-1);
      margin-bottom: 10px;
    "
  >
    <Col :span="8">
      <div class="demo-box">align: middle</div>
    </Col>
    <Col :span="8">
      <div class="demo-box" style="height: 60px">垂直居中对齐</div>
    </Col>
    <Col :span="8">
      <div class="demo-box" style="height: 80px">垂直居中对齐</div>
    </Col>
  </Row>
  <Row
    align="bottom"
    style="
      height: 100px;
      background: var(--color-bg-hover-1);
      margin-bottom: 10px;
    "
  >
    <Col :span="8">
      <div class="demo-box">align: bottom</div>
    </Col>
    <Col :span="8">
      <div class="demo-box" style="height: 60px">垂直底部对齐</div>
    </Col>
    <Col :span="8">
      <div class="demo-box" style="height: 80px">垂直底部对齐</div>
    </Col>
  </Row>
</template>

<script setup></script>

水平排列

通过 Row 组件的justify属性设置列的水平排列方式：

justify: start

左对齐

justify: center

居中对齐

justify: end

右对齐

justify: space-around

等距环绕

justify: space-between

两端对齐

<template>
  <Row
    justify="start"
    style="background: var(--color-bg-hover-1); margin-bottom: 10px"
  >
    <Col :span="8" class="demo-box">justify: start</Col>
    <Col :span="8" class="demo-box">左对齐</Col>
  </Row>
  <Row
    justify="center"
    style="background: var(--color-bg-hover-1); margin-bottom: 10px"
  >
    <Col :span="8" class="demo-box">justify: center</Col>
    <Col :span="8" class="demo-box">居中对齐</Col>
  </Row>
  <Row
    justify="end"
    style="background: var(--color-bg-hover-1); margin-bottom: 10px"
  >
    <Col :span="8" class="demo-box">justify: end</Col>
    <Col :span="8" class="demo-box">右对齐</Col>
  </Row>
  <Row
    justify="space-around"
    style="background: var(--color-bg-hover-1); margin-bottom: 10px"
  >
    <Col :span="8" class="demo-box">justify: space-around</Col>
    <Col :span="8" class="demo-box">等距环绕</Col>
  </Row>
  <Row
    justify="space-between"
    style="background: var(--color-bg-hover-1); margin-bottom: 10px"
  >
    <Col :span="8" class="demo-box">justify: space-between</Col>
    <Col :span="8" class="demo-box">两端对齐</Col>
  </Row>
</template>

<script setup></script>

嵌套网格

Col 组件内部可以嵌套 Row 组件，实现复杂布局：

嵌套列 1

嵌套列 2

嵌套列 3

嵌套列 4

嵌套列 3

嵌套列 4

<template>
  <Row :gutter="12">
    <Col :span="12">
      <Col :span="24" class="demo-box">嵌套列 1</Col>
      <Col :span="24" class="demo-box">嵌套列 2</Col>
    </Col>
    <Col :span="12">
      <Col :span="24" class="demo-box">嵌套列 3</Col>
      <Col :span="24" class="demo-box">嵌套列 4</Col>
      <Row>
        <Col :span="12" class="demo-box">嵌套列 3</Col>
        <Col :span="12" class="demo-box">嵌套列 4</Col>
      </Row>
    </Col>
  </Row>
</template>

<script setup></script>

复杂响应式配置

Col 组件的span属性可以设置为数字或对象，用于响应式布局。例如：

Col

Col

Col

<template>
  <Row>
    <Col
      :xs="{ span: 5, offset: 1 }"
      :lg="{ span: 6, offset: 2 }"
      class="demo-box"
    >
      Col
    </Col>
    <Col
      :xs="{ span: 11, offset: 1 }"
      :lg="{ span: 6, offset: 2 }"
      class="demo-box"
    >
      Col
    </Col>
    <Col
      :xs="{ span: 5, offset: 1 }"
      :lg="{ span: 6, offset: 2 }"
      class="demo-box"
    >
      Col
    </Col>
  </Row>
</template>

<script setup></script>

典型页面布局

Header

Sidebar

Main Content

Right Sidebar

Footer

<template>
  <div class="page-layout">
    <Row>
      <Col :span="24">
        <header class="header">Header</header>
      </Col>
    </Row>
    <Row :gutter="16">
      <Col :xs="24" :sm="24" :md="6" :lg="4" :xl="4">
        <aside class="sidebar">Sidebar</aside>
      </Col>
      <Col :xs="24" :sm="24" :md="12" :lg="16" :xl="16">
        <main class="main-content">Main Content</main>
      </Col>
      <Col :xs="24" :sm="24" :md="6" :lg="4" :xl="4">
        <aside class="right-sidebar">Right Sidebar</aside>
      </Col>
    </Row>
    <Row>
      <Col :span="24">
        <footer class="footer">Footer</footer>
      </Col>
    </Row>
  </div>
</template>

<script setup></script>

属性

Row 属性

参数	说明	类型	可选值	默认值
gutter	列间距	number	—	0
align	垂直对齐方式	string	top/middle/bottom	top
justify	水平排列方式	string	start/center/end/space-around/space-between	start
wrap	是否换行	boolean	—	false

Col 属性

参数	说明	类型	可选值	默认值
span	列跨度	number	0-24	24
offset	列偏移量	number	0-24	0
push	列右移	number	0-24	0
pull	列左移	number	0-24	0
xs	超小屏幕响应式配置	number/object	0-24/object	—
sm	小屏幕响应式配置	number/object	0-24/object	—
md	中等屏幕响应式配置	number/object	0-24/object	—
lg	大屏幕响应式配置	: number/object	0-24/object	—
xl	超大屏幕响应式配置（≥1200px）	number/object	0-24/object	—
order	列排序	number	—	0

响应式配置说明

当为响应式属性传入对象时，支持以下属性：

属性	说明	类型	可选值
span	列跨度	number	0-24
offset	列偏移量	number	0-24
push	列右移	number	0-24
pull	列左移	number	0-24

示例：{ span: 8, offset: 2 }