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 をオフにすると子要素は強制的に 1 行に並びます（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

アクセシビリティ

型定義

定数