Grid 欄格

24 欄格制，用 CSS Grid 實作（grid-template-columns: repeat(24, 1fr)），span / offset 直接映射到 grid-column，無需 flex 百分比換算。

基礎用法

span 12

span 8

vue

<script setup lang="ts">
</script>

<template>
  <LhRow :gutter="12">
    <LhCol :span="12">span 12</LhCol>
    <LhCol :span="12">span 12</LhCol>
    <LhCol :span="8">span 8</LhCol>
    <LhCol :span="8">span 8</LhCol>
    <LhCol :span="8">span 8</LhCol>
  </LhRow>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhRow :gutter="12">
    <LhCol :span="12">span 12</LhCol>
    <LhCol :span="12">span 12</LhCol>
    <LhCol :span="8">span 8</LhCol>
    <LhCol :span="8">span 8</LhCol>
    <LhCol :span="8">span 8</LhCol>
  </LhRow>
</template>

偏移與對齊

offset 3

置中

vue

<script setup lang="ts">
</script>

<template>
  <LhRow justify="center" align="middle" :gutter="12">
    <LhCol :span="6" :offset="3">offset 3</LhCol>
    <LhCol :span="6">居中</LhCol>
  </LhRow>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhRow justify="center" align="middle" :gutter="12">
    <LhCol :span="6" :offset="3">offset 3</LhCol>
    <LhCol :span="6">居中</LhCol>
  </LhRow>
</template>

換行

wrap 關閉後子項強制單行排列（配合 overflow 可實作橫向捲動欄格）。

span 8

vue

<script setup lang="ts">
</script>

<template>
  <!-- 不換行 -->
  <LhRow :wrap="false" :gutter="12">
    <LhCol :span="8">span 8</LhCol>
    <LhCol :span="8">span 8</LhCol>
    <LhCol :span="8">span 8</LhCol>
    <LhCol :span="8">span 8</LhCol>
  </LhRow>
</template>

vue

<script>
export default {}
</script>

<template>
  <!-- 不換行 -->
  <LhRow :wrap="false" :gutter="12">
    <LhCol :span="8">span 8</LhCol>
    <LhCol :span="8">span 8</LhCol>
    <LhCol :span="8">span 8</LhCol>
    <LhCol :span="8">span 8</LhCol>
  </LhRow>
</template>

響應式斷點

xs / sm / md / lg / xl 分檔宣告尺寸（Tailwind 閾值：640 / 768 / 1024 / 1280）；未宣告的檔位向下回退（xs 恆兜底），未宣告任何斷點時走 span。縮放瀏覽器視窗觀察變化。

span 24 / md 12 / xl 8

span 24 / xl 8

vue

<script setup lang="ts">
</script>

<template>
  <LhRow :gutter="12">
    <LhCol :span="24" :md="12" :xl="8">span 24 / md 12 / xl 8</LhCol>
    <LhCol :span="24" :md="12" :xl="8">span 24 / md 12 / xl 8</LhCol>
    <LhCol :span="24" :xl="8">span 24 / xl 8</LhCol>
  </LhRow>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhRow :gutter="12">
    <LhCol :span="24" :md="12" :xl="8">span 24 / md 12 / xl 8</LhCol>
    <LhCol :span="24" :md="12" :xl="8">span 24 / md 12 / xl 8</LhCol>
    <LhCol :span="24" :xl="8">span 24 / xl 8</LhCol>
  </LhRow>
</template>

平移（push / pull）

push / pull 在 offset 基礎上平移起點（右移 / 左移），用於列的對位微調。

span 8 push 8

span 8

vue

<script setup lang="ts">
</script>

<template>
  <LhRow :gutter="12">
    <LhCol :span="8" :push="8">span 8 push 8</LhCol>
    <LhCol :span="8">span 8</LhCol>
  </LhRow>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhRow :gutter="12">
    <LhCol :span="8" :push="8">span 8 push 8</LhCol>
    <LhCol :span="8">span 8</LhCol>
  </LhRow>
</template>

後退與響應式

pull 讓列向左退相應欄數（與 offset 相反）；xs / sm / md / lg / xl 按斷點宣告 span，sizes 可一次批量宣告。

pull 2

響應式

sizes

vue

<script setup lang="ts">
</script>

<template>
  <LhRow :gutter="12">
    <LhCol :span="8" :pull="2">pull 2</LhCol>
    <LhCol :span="12" :xs="24" :sm="12" :lg="8">响应式</LhCol>
    <LhCol :span="10" :sizes="{ xs: 24, md: 12, xl: 6 }">sizes</LhCol>
  </LhRow>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhRow :gutter="12">
    <LhCol :span="8" :pull="2">pull 2</LhCol>
    <LhCol :span="12" :xs="24" :sm="12" :lg="8">响应式</LhCol>
    <LhCol :span="10" :sizes="{ xs: 24, md: 12, xl: 6 }">sizes</LhCol>
  </LhRow>
</template>

API

LhRow Props

屬性名	說明	類型	預設值
justify	主軸上排列	`'start' \| 'center' \| 'end' \| 'space-between' \| 'space-around'`	`'start'`
align	交叉軸上對齊	`'top' \| 'middle' \| 'bottom'`	`'top'`
gutter	列間距（px 或 [橫向, 縱向]）	`number \| [number, number]`	`0`
wrap	是否換行	`boolean`	`true`
sx	sx 快速版面配置屬性	`LhSxProps`	—

LhCol Props

屬性名	說明	類型	預設值
span	佔據列數（24 欄格制）	`number`	—
offset	左側偏移列數	`number`	—
push	向右平移列數	`number`	—
pull	向左平移列數	`number`	—
xs	<640px 生效（未宣告時向下回退）	`LhColSize`	—
sm	≥640px 生效	`LhColSize`	—
md	≥768px 生效	`LhColSize`	—
lg	≥1024px 生效	`LhColSize`	—
xl	≥1280px 生效	`LhColSize`	—
sizes	按斷點批量宣告（與 xs~xl 等價，任選其一）	`Partial<Record<LhGridBreakpoint, LhColSize>>`	—
sx	sx 快速版面配置屬性	`LhSxProps`	—

無障礙

純版面配置元件，無互動語意；請勿用欄格承載需要語意結構的列表（應使用 List / Table 等）

類型定義

本元件對外匯出的 TypeScript 類型結構如下（自動提取自 packages/components/grid/src/types.ts 與 @lh-ui/share/core/* 原始碼，點選各條目展開檢視完整定義；屬性說明見上方 Props 表）：

LhRowJustify

/** 子元素主軸上排列 */
export type LhRowJustify = 'start' | 'center' | 'end' | 'space-between' | 'space-around'

LhRowAlign

/** 子元素交叉軸上對齊 */
export type LhRowAlign = 'top' | 'middle' | 'bottom'

LhRowProps

export interface LhRowProps {
  /** 主軸上排列 */
  justify?: LhRowJustify
  /** 交叉軸上對齊 */
  align?: LhRowAlign
  /** 列間距（px 或 [橫向, 縱向]） */
  gutter?: number | [number, number]
  /** 是否換行 */
  wrap?: boolean
  /** sx 快速版面配置屬性 */
  sx?: LhSxProps
}

LhColProps

export interface LhColProps {
  /** 佔據列數（24 欄格制） */
  span?: number
  /** 左側偏移列數 */
  offset?: number
  /** 向右平移列數 */
  push?: number
  /** 向左平移列數 */
  pull?: number
  /** <640px 生效（未宣告時向下回退到更小檔） */
  xs?: LhColSize
  /** ≥640px 生效 */
  sm?: LhColSize
  /** ≥768px 生效 */
  md?: LhColSize
  /** ≥1024px 生效 */
  lg?: LhColSize
  /** ≥1280px 生效 */
  xl?: LhColSize
  /** 按斷點批量宣告的響應式尺寸（與 xs~xl 等價，任選其一） */
  sizes?: LhBreakpointSizes
  /** sx 快速版面配置屬性 */
  sx?: LhSxProps
}

LhColSize _{（來自 @lh-ui/share/core/grid）}

/** Col 的尺寸設定：數字或物件（也支援按斷點的物件） */
export type LhColSize = number | LhGridSpan

LhGridSpan _{（來自 @lh-ui/share/core/grid）}

/** 欄格尺寸（1-24 的 span，或帶 offset 的物件） */
export interface LhGridSpan {
  span?: number
  offset?: number
  push?: number
  pull?: number
}

LhBreakpointSizes _{（來自 @lh-ui/share/core/grid）}

/** 按斷點宣告的響應式尺寸（未宣告的檔位向下回退，xs 恆兜底） */
export type LhBreakpointSizes = Partial<Record<LhGridBreakpoint, LhColSize>>

LhGridBreakpoint _{（來自 @lh-ui/share/core/grid）}

/** 欄格斷點 */
export type LhGridBreakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl'

常數

本元件用到的公開常數如下（可在 Props 表的「類型 / 預設值」列點選同名條目跳轉至此）：

LH_GRID_COLUMNS _{（來自 @lh-ui/share/core/grid）}

/** 欄格總列數 */
export const LH_GRID_COLUMNS = 24

LH_GRID_BREAKPOINTS _{（來自 @lh-ui/share/core/grid）}

/**
 * 響應式斷點（Tailwind 風格，寬度下限 px）：
 * xs 為預設檔（<640），其餘按「≥ 閾值」命中。
 */
export const LH_GRID_BREAKPOINTS: Record<LhGridBreakpoint, number> = {
  xs: 0,
  sm: 640,
  md: 768,
  lg: 1024,
  xl: 1280,
}

LH_GRID_BREAKPOINT_ORDER _{（來自 @lh-ui/share/core/grid）}

/** 斷點從大到小的穩定順序 */
export const LH_GRID_BREAKPOINT_ORDER: LhGridBreakpoint[] = ['xl', 'lg', 'md', 'sm', 'xs']

Grid 欄格 ​

基礎用法 ​

偏移與對齊 ​

換行 ​

響應式斷點 ​

平移（push / pull） ​

後退與響應式 ​

API ​

LhRow Props ​

LhCol Props ​

無障礙 ​

類型定義 ​

常數 ​

Grid 欄格

基礎用法

偏移與對齊

換行

響應式斷點

平移（push / pull）

後退與響應式

API

LhRow Props

LhCol Props

無障礙

類型定義

常數