Grid 栅格

24 列动态栅格系统，支持间距、偏移、响应式断点。

基础用法

col-24

col-12

col-12

col-8

col-8

col-8

col-6

col-6

col-6

col-6

通过 span 属性设置列宽，总列数为 24

vue

<template>
  <div style="display: flex; flex-direction: column; gap: 12px">
    <ARow>
      <ACol :span="24"><div class="box">col-24</div></ACol>
    </ARow>
    <ARow :gutter="8">
      <ACol :span="12"><div class="box">col-12</div></ACol>
      <ACol :span="12"><div class="box">col-12</div></ACol>
    </ARow>
    <ARow :gutter="8">
      <ACol :span="8"><div class="box">col-8</div></ACol>
      <ACol :span="8"><div class="box">col-8</div></ACol>
      <ACol :span="8"><div class="box">col-8</div></ACol>
    </ARow>
    <ARow :gutter="8">
      <ACol :span="6"><div class="box">col-6</div></ACol>
      <ACol :span="6"><div class="box">col-6</div></ACol>
      <ACol :span="6"><div class="box">col-6</div></ACol>
      <ACol :span="6"><div class="box">col-6</div></ACol>
    </ARow>
  </div>
</template>

<script setup lang="ts">
import { ARow, ACol } from '@lite-code/aui-vue'
</script>

<style scoped>
.box {
  background: var(--aui-accent);
  border-radius: 4px;
  padding: 12px 0;
  text-align: center;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
}
</style>

偏移

col-8

col-8 offset-8

col-6 offset-6

col-6 offset-6

通过 offset 向右偏移指定列数

vue

<template>
  <div style="display: flex; flex-direction: column; gap: 12px">
    <ARow>
      <ACol :span="8"><div class="box">col-8</div></ACol>
      <ACol :span="8" :offset="8"><div class="box" style="opacity: 0.6">col-8 offset-8</div></ACol>
    </ARow>
    <ARow>
      <ACol :span="6" :offset="6"><div class="box" style="opacity: 0.6">col-6 offset-6</div></ACol>
      <ACol :span="6" :offset="6"><div class="box" style="opacity: 0.6">col-6 offset-6</div></ACol>
    </ARow>
  </div>
</template>

<script setup lang="ts">
import { ARow, ACol } from '@lite-code/aui-vue'
</script>

<style scoped>
.box {
  background: var(--aui-accent);
  border-radius: 4px;
  padding: 12px 0;
  text-align: center;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
}
</style>

响应式

xs=24 sm=12 md=8 lg=6

xs=24 sm=12 md=8 lg=6

xs=24 sm=12 md=8 lg=6

xs=24 sm=12 md=8 lg=6

xs / sm / md / lg / xl / xxl 对应不同断点下的列宽

vue

<template>
  <ARow :gutter="[12, 12]">
    <ACol v-for="n in 4" :key="n" :xs="24" :sm="12" :md="8" :lg="6">
      <div class="box" :style="{ opacity: n % 2 === 0 ? 0.6 : 1 }">
        xs=24 sm=12 md=8 lg=6
      </div>
    </ACol>
  </ARow>
</template>

<script setup lang="ts">
import { ARow, ACol } from '@lite-code/aui-vue'
</script>

<style scoped>
.box {
  background: var(--aui-accent);
  border-radius: 4px;
  padding: 12px 0;
  text-align: center;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
}
</style>

API

ARow Props

属性	类型	默认值	说明
gutter	number | [number, number] | Partial<Record<Breakpoint, number>>	—	列间距（水平）或 [水平, 垂直]
justify	'start' | 'end' | 'center' | 'space-around' | 'space-between' | 'space-evenly'	—	水平排列方式
align	'top' | 'middle' | 'bottom' | 'stretch'	—	垂直对齐方式
wrap	boolean	true	是否自动换行

ACol Props

属性	类型	默认值	说明
span	number	—	列宽，0–24
offset	number	—	向右偏移列数
order	number	—	排列顺序
flex	string | number	—	flex 属性，优先级高于 span
xs	ColSize	—	< 576px 响应式配置
sm	ColSize	—	≥ 576px 响应式配置
md	ColSize	—	≥ 768px 响应式配置
lg	ColSize	—	≥ 992px 响应式配置
xl	ColSize	—	≥ 1200px 响应式配置
xxl	ColSize	—	≥ 1600px 响应式配置

ColSize = number | { span?: number; offset?: number; order?: number }

Breakpoint

断点	宽度范围
xs	< 576px
sm	≥ 576px
md	≥ 768px
lg	≥ 992px
xl	≥ 1200px
xxl	≥ 1600px