Grid 栅格

栅格组件提供现代化的 CSS Grid 布局能力，支持响应式与灵活的网格配置。

基础用法

Grid

示例即将加载...

<template>
  <div style="width: 520px; padding: 16px; border: 1px solid var(--tx-border-color); border-radius: 12px;">
    <TxGrid :cols="3" :gap="12">
      <TxGridItem v-for="i in 6" :key="i">
        <div style="height: 54px; border-radius: 10px; background: var(--tx-fill-color-light, #f5f7fa); display: flex; align-items: center; justify-content: center; color: var(--tx-text-color-secondary);">
          {{ i }}
        </div>
      </TxGridItem>
    </TxGrid>
  </div>
</template>

最简单的网格布局：

<template>
  <TxGrid :cols="3" gap="16">
    <TxGridItem>项目 1</TxGridItem>
    <TxGridItem>项目 2</TxGridItem>
    <TxGridItem>项目 3</TxGridItem>
    <TxGridItem>项目 4</TxGridItem>
    <TxGridItem>项目 5</TxGridItem>
    <TxGridItem>项目 6</TxGridItem>
  </TxGrid>
</template>

响应式网格

响应式列数

<template>
  <TxGrid :cols="{ xs: 1, sm: 2, md: 3, lg: 4, xl: 5 }" gap="20">
    <TxGridItem v-for="i in 10" :key="i">
      <TxCard>项目 {{ i }}</TxCard>
    </TxGridItem>
  </TxGrid>
</template>

自适应网格

<template>
  <TxGrid min-item-width="250px" gap="24">
    <TxGridItem v-for="item in items" :key="item.id">
      <TxCard>
        <h3>{{ item.title }}</h3>
        <p>{{ item.description }}</p>
      </TxCard>
    </TxGridItem>
  </TxGrid>
</template>

网格间距

统一间距

<template>
  <TxGrid :cols="3" gap="32">
    <TxGridItem v-for="i in 6" :key="i">
      项目 {{ i }}
    </TxGridItem>
  </TxGrid>
</template>

不同方向间距

<template>
  <TxGrid :cols="3" :gap="{ row: 24, col: 16 }">
    <TxGridItem v-for="i in 6" :key="i">
      项目 {{ i }}
    </TxGridItem>
  </TxGrid>
</template>

响应式间距

<template>
  <TxGrid
    :cols="{ xs: 1, md: 2, lg: 3 }"
    :gap="{ xs: 16, md: 24, lg: 32 }"
  >
    <TxGridItem v-for="i in 6" :key="i">
      项目 {{ i }}
    </TxGridItem>
  </TxGrid>
</template>

网格项配置

跨列布局

<template>
  <TxGrid :cols="4" gap="16">
    <TxGridItem>普通项目</TxGridItem>
    <TxGridItem :col-span="2">跨 2 列项目</TxGridItem>
    <TxGridItem>普通项目</TxGridItem>
    <TxGridItem :col-span="3">跨 3 列项目</TxGridItem>
    <TxGridItem>普通项目</TxGridItem>
  </TxGrid>
</template>

跨行布局

<template>
  <TxGrid :cols="3" gap="16">
    <TxGridItem>项目 1</TxGridItem>
    <TxGridItem :row-span="2">跨 2 行项目</TxGridItem>
    <TxGridItem>项目 3</TxGridItem>
    <TxGridItem>项目 4</TxGridItem>
    <TxGridItem>项目 5</TxGridItem>
  </TxGrid>
</template>

对齐方式

网格对齐

<template>
  <TxGrid
    :cols="3"
    gap="16"
    justify="center"
    align="center"
    style="height: 400px;"
  >
    <TxGridItem v-for="i in 3" :key="i">
      项目 {{ i }}
    </TxGridItem>
  </TxGrid>
</template>

项目对齐

<template>
  <TxGrid :cols="3" gap="16">
    <TxGridItem justify-self="start">左对齐</TxGridItem>
    <TxGridItem justify-self="center">居中对齐</TxGridItem>
    <TxGridItem justify-self="end">右对齐</TxGridItem>
  </TxGrid>
</template>

API 参考

Grid Props

属性	类型	默认值	说明
cols	`number \| ResponsiveValue<number>`	`0`	列数；为 0 时不输出固定列模板
rows	`number`	`0`	行数；为 0 时不输出固定行模板
gap	`number \| string \| ResponsiveValue<number \| string> \| GapValue`	`16`	网格间距
minItemWidth	`string`	-	项目最小宽度（自适应模式）
justify	`'start' \| 'end' \| 'center' \| 'stretch'`	`'stretch'`	水平对齐
align	`'start' \| 'end' \| 'center' \| 'stretch'`	`'stretch'`	垂直对齐

GridItem Props

属性	类型	默认值	说明
colSpan	`number`	`1`	跨列数，最小按 1 处理
rowSpan	`number`	`1`	跨行数，最小按 1 处理
justifySelf	`'start' \| 'end' \| 'center' \| 'stretch'`	-	自身水平对齐
alignSelf	`'start' \| 'end' \| 'center' \| 'stretch'`	-	自身垂直对齐

类型定义

type Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl'

interface ResponsiveValue<T> {
  xs?: number
  sm?: number
  md?: number
  lg?: number
  xl?: number
}

interface GapValue {
  row?: number | string
  col?: number | string
}

交互契约

minItemWidth 优先于 cols，会输出 repeat(auto-fit, minmax(..., 1fr))。
响应式值按当前窗口宽度解析，断点为 xs < 640、sm < 768、md < 1024、lg < 1280、其余为 xl。
gap 数字会转为 px；{ row, col } 可分别控制行列间距。
TxGridItem 的 colSpan / rowSpan 最小按 1 处理。