Grid 栅格

通过行列结构组织页面内容，适合构建响应式表单、卡片和信息区块。

何时使用

页面需要按 24 栅格组织横向信息。
表单、详情、卡片列表需要响应式换行或固定列间距。
需要用 CSS Grid 管理折叠、后缀操作项或更灵活的列数。

基础用法

vue

<template>
  <x-row :gutter="[12, 12]">
    <x-col :span="8"><div class="grid-demo-cell">8</div></x-col>
    <x-col :span="8"><div class="grid-demo-cell">8</div></x-col>
    <x-col :span="8"><div class="grid-demo-cell">8</div></x-col>
  </x-row>
</template>

间距

vue

<template>
  <x-row :gutter="[16, 12]">
    <x-col :span="6"><div class="grid-demo-cell">6</div></x-col>
    <x-col :span="6"><div class="grid-demo-cell">6</div></x-col>
    <x-col :span="6"><div class="grid-demo-cell">6</div></x-col>
    <x-col :span="6"><div class="grid-demo-cell">6</div></x-col>
    <x-col :span="12"><div class="grid-demo-cell">12</div></x-col>
    <x-col :span="12"><div class="grid-demo-cell">12</div></x-col>
  </x-row>
</template>

偏移

span 8

offset 8

offset 6

vue

<template>
  <x-row :gutter="[12, 12]">
    <x-col :span="8"><div class="grid-demo-cell">span 8</div></x-col>
    <x-col :span="8" :offset="8"><div class="grid-demo-cell">offset 8</div></x-col>
    <x-col :span="6" :offset="6"><div class="grid-demo-cell">offset 6</div></x-col>
    <x-col :span="6" :offset="6"><div class="grid-demo-cell">offset 6</div></x-col>
  </x-row>
</template>

对齐

start

center

end

center

vue

<template>
  <x-row :gutter="[12, 12]" justify="space-between" align="center">
    <x-col :span="5"><div class="grid-demo-cell">start</div></x-col>
    <x-col :span="5"><div class="grid-demo-cell">center</div></x-col>
    <x-col :span="5"><div class="grid-demo-cell">end</div></x-col>
  </x-row>

  <x-row :gutter="[12, 12]" justify="center">
    <x-col :span="5"><div class="grid-demo-cell">center</div></x-col>
    <x-col :span="5"><div class="grid-demo-cell">center</div></x-col>
  </x-row>
</template>

排序

1 / order 3

2 / order 1

3 / order 2

vue

<template>
  <x-row :gutter="[12, 12]">
    <x-col :span="8" :order="3"><div class="grid-demo-cell">1 / order 3</div></x-col>
    <x-col :span="8" :order="1"><div class="grid-demo-cell">2 / order 1</div></x-col>
    <x-col :span="8" :order="2"><div class="grid-demo-cell">3 / order 2</div></x-col>
  </x-row>
</template>

Flex 列

120px

auto

80px

vue

<template>
  <x-row :gutter="[12, 12]" :wrap="false">
    <x-col flex="120px"><div class="grid-demo-cell">120px</div></x-col>
    <x-col flex="auto"><div class="grid-demo-cell">auto</div></x-col>
    <x-col flex="80px"><div class="grid-demo-cell">80px</div></x-col>
  </x-row>
</template>

响应式

xs 24 / sm 12

对象配置

xs 隐藏

vue

<script setup lang="ts">
import { ref } from 'vue';

const denseMode = ref(false);
</script>

<template>
  <x-row :gutter="[{ xs: 8, md: 16 }, 12]">
    <x-col :xs="24" :sm="12" :md="denseMode ? 6 : 8">
      <div class="grid-demo-cell">xs 24 / sm 12</div>
    </x-col>
    <x-col
      :xs="{ span: 24, offset: 0 }"
      :sm="{ span: 12, offset: 0 }"
      :md="{ span: denseMode ? 6 : 8, offset: 0 }"
    >
      <div class="grid-demo-cell">对象配置</div>
    </x-col>
    <x-col :xs="0" :sm="12" :md="denseMode ? 6 : 8">
      <div class="grid-demo-cell">xs 隐藏</div>
    </x-col>
  </x-row>
</template>

Grid 布局

跨 2 列

普通项

offset 1

跨 3 列

vue

<template>
  <x-grid :cols="4" :col-gap="12" :row-gap="12">
    <x-grid-item :span="2"><div class="grid-demo-cell">跨 2 列</div></x-grid-item>
    <x-grid-item><div class="grid-demo-cell">普通项</div></x-grid-item>
    <x-grid-item><div class="grid-demo-cell">普通项</div></x-grid-item>
    <x-grid-item :offset="1"><div class="grid-demo-cell">offset 1</div></x-grid-item>
    <x-grid-item :span="3"><div class="grid-demo-cell">跨 3 列</div></x-grid-item>
  </x-grid>
</template>

Grid 折叠

item 1

item 2

item 3

item 4

item 5

item 6

已全部显示

vue

<script setup lang="ts">
import { ref } from 'vue';

const gridCollapsed = ref(true);
</script>

<template>
  <x-button @click="gridCollapsed = !gridCollapsed">
    {{ gridCollapsed ? '展开' : '收起' }}
  </x-button>

  <x-grid :cols="4" :col-gap="12" :row-gap="12" :collapsed="gridCollapsed" :collapsed-rows="1">
    <x-grid-item v-for="index in 6" :key="index">
      <div class="grid-demo-cell">item {{ index }}</div>
    </x-grid-item>
    <x-grid-item suffix #="{ overflow }">
      <div class="grid-demo-cell">{{ overflow ? '还有更多' : '已全部显示' }}</div>
    </x-grid-item>
  </x-grid>
</template>

按需导入

import { Grid, Row, Col, GridItem } from 'x-next';

Row Props

参数	说明	类型	默认值
`gutter`	栅格间隔，支持数字、响应式对象或 `[水平, 垂直]`	`number \| ResponsiveValue \| [number \| ResponsiveValue, number \| ResponsiveValue]`	`0`
`justify`	水平对齐	`'start' \| 'center' \| 'end' \| 'space-around' \| 'space-between'`	`'start'`
`align`	垂直对齐	`'start' \| 'center' \| 'end' \| 'stretch'`	`'start'`
`div`	是否仅按普通 div 渲染	`boolean`	`false`
`wrap`	Col 是否换行	`boolean`	`true`

Col Props

参数	说明	类型	默认值
`span`	栅格占位格数，传 `0` 时隐藏	`number`	`24`
`offset`	左侧间隔格数	`number`	`-`
`order`	排序	`number`	`-`
`xs/sm/md/lg/xl/xxl`	响应式栅格配置，可传数字或 `{ span, offset, order }`	`number \| object`	`-`
`flex`	flex 布局属性	`number \| string`	`-`

Grid Props

参数	说明	类型	默认值
`cols`	每行列数	`number \| ResponsiveValue`	`24`
`rowGap`	行间距	`number \| ResponsiveValue`	`0`
`colGap`	列间距	`number \| ResponsiveValue`	`0`
`collapsed`	是否折叠	`boolean`	`false`
`collapsedRows`	折叠时显示行数	`number`	`1`

GridItem Props

参数	说明	类型	默认值
`span`	跨越格数	`number \| ResponsiveValue`	`1`
`offset`	左侧间隔格数	`number \| ResponsiveValue`	`0`
`suffix`	是否作为后缀项固定到行尾	`boolean`	`false`

Slots

组件	插槽名	说明	参数
`Row` / `Col` / `Grid`	`default`	内容	`-`
`GridItem`	`default`	内容	`{ overflow }`

ResponsiveValue

参数	说明	类型	默认值
`xxl`	`>= 1600px` 响应式配置	`number`	`-`
`xl`	`>= 1200px` 响应式配置	`number`	`-`
`lg`	`>= 992px` 响应式配置	`number`	`-`
`md`	`>= 768px` 响应式配置	`number`	`-`
`sm`	`>= 576px` 响应式配置	`number`	`-`
`xs`	`< 576px` 响应式配置	`number`	`-`

Grid 栅格 ​

何时使用 ​

基础用法 ​

间距 ​

偏移 ​

对齐 ​

排序 ​

Flex 列 ​

响应式 ​

Grid 布局 ​

Grid 折叠 ​

按需导入 ​

Row Props ​

Col Props ​

Grid Props ​

GridItem Props ​

Slots ​

ResponsiveValue ​