Layout 栅格布局

通过基础的 24 分栏，迅速简便地创建布局。

基础布局

使用单一分栏创建基础的栅格布局。

vue

<template>
  <c-row>
    <c-col :span="24"><div class="grid-content bg-purple-dark">24</div></c-col>
  </c-row>
  <c-row>
    <c-col :span="12"><div class="grid-content bg-purple">12</div></c-col>
    <c-col :span="12"><div class="grid-content bg-purple-light">12</div></c-col>
  </c-row>
  <c-row>
    <c-col :span="8"><div class="grid-content bg-purple">8</div></c-col>
    <c-col :span="8"><div class="grid-content bg-purple-light">8</div></c-col>
    <c-col :span="8"><div class="grid-content bg-purple">8</div></c-col>
  </c-row>
</template>

分栏间隔

分栏之间存在间隔。

vue

<template>
  <c-row :gutter="20">
    <c-col :span="6"><div class="grid-content bg-purple">6</div></c-col>
    <c-col :span="6"><div class="grid-content bg-purple">6</div></c-col>
    <c-col :span="6"><div class="grid-content bg-purple">6</div></c-col>
    <c-col :span="6"><div class="grid-content bg-purple">6</div></c-col>
  </c-row>
</template>

混合布局

通过基础的 1/24 分栏任意扩展组合形成较为复杂的混合布局。

vue

<template>
  <c-row :gutter="20">
    <c-col :span="16"><div class="grid-content bg-purple">16</div></c-col>
    <c-col :span="8"><div class="grid-content bg-purple">8</div></c-col>
  </c-row>
  <c-row :gutter="20">
    <c-col :span="8"><div class="grid-content bg-purple">8</div></c-col>
    <c-col :span="8"><div class="grid-content bg-purple">8</div></c-col>
    <c-col :span="4"><div class="grid-content bg-purple">4</div></c-col>
    <c-col :span="4"><div class="grid-content bg-purple">4</div></c-col>
  </c-row>
</template>

分栏偏移

支持偏移指定的栏数。

6 offset 6

12 offset 6

vue

<template>
  <c-row :gutter="20">
    <c-col :span="6"><div class="grid-content bg-purple">6</div></c-col>
    <c-col :span="6" :offset="6"
      ><div class="grid-content bg-purple">6 offset 6</div></c-col
    >
  </c-row>
  <c-row :gutter="20">
    <c-col :span="6" :offset="6"
      ><div class="grid-content bg-purple">6 offset 6</div></c-col
    >
    <c-col :span="6" :offset="6"
      ><div class="grid-content bg-purple">6 offset 6</div></c-col
    >
  </c-row>
</template>

对齐方式

通过 justify 属性来指定 start, center, end, space-between, space-around, space-evenly 其中的值来定义子元素的排版方式。

vue

<template>
  <c-row justify="start">
    <c-col :span="6"><div class="grid-content bg-purple">6</div></c-col>
    <c-col :span="6"><div class="grid-content bg-purple-light">6</div></c-col>
    <c-col :span="6"><div class="grid-content bg-purple">6</div></c-col>
  </c-row>
  <c-row justify="center"> ...与上面相同 </c-row>
  <c-row justify="end"> ... </c-row>
  <c-row justify="space-between"> ... </c-row>
  <c-row justify="space-around"> ... </c-row>
  <c-row justify="space-evenly"> ... </c-row>
</template>

响应式布局

参照了 Bootstrap 的响应式设计，预设了五个响应尺寸：xs、sm、md、lg 和 xl。

xs=8 sm=6 md=4 lg=3 xl=1

xs=4 sm=6 md=8 lg=9 xl=11

xs=8 sm=6 md=4 lg=3 xl=1

vue

<template>
  <c-row :gutter="10">
    <c-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1">
      <div class="grid-content bg-purple">xs=8 sm=6 md=4 lg=3 xl=1</div>
    </c-col>
    <c-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11">
      <div class="grid-content bg-purple-light">xs=4 sm=6 md=8 lg=9 xl=11</div>
    </c-col>
    <c-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11">
      <div class="grid-content bg-purple">xs=4 sm=6 md=8 lg=9 xl=11</div>
    </c-col>
    <c-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1">
      <div class="grid-content bg-purple-light">xs=8 sm=6 md=4 lg=3 xl=1</div>
    </c-col>
  </c-row>
</template>

交互式示例

动态调整栅格参数，实时查看效果。

间隔大小：20px

对齐方式：

vue

<template>
  <div>
    <c-row :gutter="gutter" :justify="justify">
      <c-col :span="6"><div class="grid-content bg-purple">6</div></c-col>
      <c-col :span="6"><div class="grid-content bg-purple-light">6</div></c-col>
      <c-col :span="6"><div class="grid-content bg-purple">6</div></c-col>
    </c-row>
  </div>
</template>

<script setup>
import { ref } from "vue"

const gutter = ref(20)
const justify = ref("start") //  start | center | end | space-between | space-around | space-evenly
</script>

实用布局案例

典型页面布局

Header 头部

Sidebar 侧边栏

Main Content 主要内容

Footer 底部

卡片网格布局

Card 1

Card 2

Card 3

Card 4

Card 5

Card 6

Card 7

Card 8

表单布局

用户名

邮箱

地址

城市

省份

邮编

vue

<template>
  <!-- 典型页面布局 -->
  <c-row :gutter="20">
    <c-col :span="24">
      <div class="header">Header 头部</div>
    </c-col>
  </c-row>
  <c-row :gutter="20">
    <c-col :span="6">
      <div class="sidebar">Sidebar 侧边栏</div>
    </c-col>
    <c-col :span="18">
      <div class="main-content">Main Content 主要内容</div>
    </c-col>
  </c-row>
  <c-row :gutter="20">
    <c-col :span="24">
      <div class="footer">Footer 底部</div>
    </c-col>
  </c-row>

  <!-- 卡片网格布局 -->
  <c-row :gutter="16">
    <c-col :xs="24" :sm="12" :md="8" :lg="6" v-for="i in 8" :key="i">
      <div class="card">Card {{ i }}</div>
    </c-col>
  </c-row>

  <!-- 表单布局 -->
  <c-row :gutter="20">
    <c-col :span="12">
      <input placeholder="用户名" />
    </c-col>
    <c-col :span="12">
      <input placeholder="邮箱" />
    </c-col>
  </c-row>
  <c-row :gutter="20" style="margin-top: 16px;">
    <c-col :span="24">
      <div class="grid-content bg-purple-light" style="height: 40px;">地址</div>
    </c-col>
  </c-row>
  <c-row :gutter="20" style="margin-top: 16px;">
    <c-col :span="8">
      <div class="grid-content bg-purple-light" style="height: 40px;">城市</div>
    </c-col>
    <c-col :span="8">
      <div class="grid-content bg-purple-light" style="height: 40px;">省份</div>
    </c-col>
    <c-col :span="8">
      <div class="grid-content bg-purple-light" style="height: 40px;">邮编</div>
    </c-col>
  </c-row>
</template>

使用提示

最佳实践

合理使用间隔：建议使用 16px 或 20px 的间隔，这样既能保持视觉层次，又不会过于拥挤。
响应式设计：优先考虑移动端体验，使用 :xs 属性定义小屏幕布局，然后逐步适配更大屏幕。
语义化布局：根据内容的重要性和层级关系来安排栅格，而不是仅仅为了视觉效果。
性能考虑：避免过度嵌套 Row 和 Col 组件，保持结构简洁。

常见问题

Q: 为什么设置了 gutter 但没有效果？

A: 确保 gutter 设置在 Row 组件上，而不是 Col 组件。gutter 会自动为子 Col 组件添加相应的 padding。

Q: 如何实现垂直居中？

A: 使用 Row 的 align="middle" 属性，或者结合 CSS 的 flexbox 属性。

Q: 响应式断点是什么？

xs: <576px
sm: ≥576px
md: ≥768px
lg: ≥992px
xl: ≥1200px

Q: 可以嵌套使用吗？

A: 可以，但建议保持结构简洁，避免过度嵌套影响性能。

vue

<!-- 正确的嵌套使用 -->
<c-row>
  <c-col :span="12">
    <c-row :gutter="10">
      <c-col :span="12">内容1</c-col>
      <c-col :span="12">内容2</c-col>
    </c-row>
  </c-col>
  <c-col :span="12">其他内容</c-col>
</c-row>

Row API

Row Attributes

属性名	说明	类型	可选值	默认值
gutter	栅格间隔	number	—	0
justify	flex 布局下的水平排列方式	string	start / end / center / space-around / space-between / space-evenly	start
align	flex 布局下的垂直排列方式	string	top / middle / bottom	top
wrap	是否自动换行，仅在 type 为 flex 时有效	boolean	—	true

Col API

Col Attributes

属性名	说明	类型	可选值	默认值
span	栅格占据的列数	number	0-24	24
offset	栅格左侧的间隔格数	number	0-24	0
push	栅格向右移动格数	number	0-24	0
pull	栅格向左移动格数	number	0-24	0
xs	`<768px` 响应式栅格数或者栅格属性对象	number	0-24	—
sm	`≥768px` 响应式栅格数或者栅格属性对象	number	0-24	—
md	`≥992px` 响应式栅格数或者栅格属性对象	number	0-24	—
lg	`≥1200px` 响应式栅格数或者栅格属性对象	number	0-24	—
xl	`≥1920px` 响应式栅格数或者栅格属性对象	number	0-24	—

Layout 栅格布局 ​

基础布局 ​

分栏间隔 ​

混合布局 ​

分栏偏移 ​

对齐方式 ​

响应式布局 ​

交互式示例 ​

实用布局案例 ​

典型页面布局 ​

卡片网格布局 ​

表单布局 ​

使用提示 ​

最佳实践 ​

常见问题 ​

Row API ​

Row Attributes ​

Col API ​

Col Attributes ​

示例代码 ​