Grid

A 24-column grid implemented with CSS Grid (grid-template-columns: repeat(24, 1fr)); span / offset map straight onto grid-column.

Basic usage

span 12

span 8

vue

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

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

vue

<script>
export default {}
</script>

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

Offset and alignment

offset 3

centered

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">centered</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">centered</LhCol>
  </LhRow>
</template>

Wrap

Set wrap to false to force all columns onto a single line (combine with overflow for a horizontally scrolling grid).

span 8

vue

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

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

vue

<script>
export default {}
</script>

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

Responsive breakpoints

Declare sizes per breakpoint with xs / sm / md / lg / xl (Tailwind thresholds: 640 / 768 / 1024 / 1280); undeclared tiers fall back downward (xs is the catch-all), and span is used when no breakpoint is set. Resize the browser window to observe.

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 shift the start line right / left on top of offset, for fine-grained column alignment.

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 and responsive breakpoints

pull moves a column left by the given number of columns (opposite of offset); xs / sm / md / lg / xl declare span per breakpoint, and sizes declares them all at once.

pull 2

Responsive

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">Responsive</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">Responsive</LhCol>
    <LhCol :span="10" :sizes="{ xs: 24, md: 12, xl: 6 }">sizes</LhCol>
  </LhRow>
</template>

API

LhRow Props

Attribute	Description	Type	Default
justify	Main-axis distribution	`'start' \| 'center' \| 'end' \| 'space-between' \| 'space-around'`	`'start'`
align	Cross-axis alignment	`'top' \| 'middle' \| 'bottom'`	`'top'`
gutter	Column gap (px or [horizontal, vertical])	`number \| [number, number]`	`0`
wrap	Wrap columns	`boolean`	`true`
sx	Quick layout props	`LhSxProps`	—

LhCol Props

Attribute	Description	Type	Default
span	Columns to occupy (24-column grid)	`number`	—
offset	Columns to offset from the left	`number`	—
push	Columns to push right	`number`	—
pull	Columns to pull left	`number`	—
xs	Below 640px (falls back downward)	`LhColSize`	—
sm	640px and up	`LhColSize`	—
md	768px and up	`LhColSize`	—
lg	1024px and up	`LhColSize`	—
xl	1280px and up	`LhColSize`	—
sizes	Per-breakpoint declaration (equivalent to xs~xl)	`Partial<Record<LhGridBreakpoint, LhColSize>>`	—
sx	Quick layout props	`LhSxProps`	—

Accessibility

Layout-only component with no interactive semantics; use List / Table for semantic structures.

Type Definitions

The TypeScript type structures exported by this component (auto-extracted from packages/components/grid/src/types.ts and @lh-ui/share/core/* sources; click each entry to expand; see the Props table above for attribute descriptions):

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
  gutter?: number | [number, number]
  wrap?: boolean
  sx?: LhSxProps
}

LhColProps

export interface LhColProps {
  span?: number
  offset?: number
  push?: number
  pull?: number
  xs?: LhColSize
  sm?: LhColSize
  md?: LhColSize
  lg?: LhColSize
  xl?: LhColSize
  sizes?: LhBreakpointSizes
  sx?: LhSxProps
}

LhColSize _{(from @lh-ui/share/core/grid)}

export type LhColSize = number | LhGridSpan

LhGridSpan _{(from @lh-ui/share/core/grid)}

export interface LhGridSpan {
  span?: number
  offset?: number
  push?: number
  pull?: number
}

LhBreakpointSizes _{(from @lh-ui/share/core/grid)}

export type LhBreakpointSizes = Partial<Record<LhGridBreakpoint, LhColSize>>

LhGridBreakpoint _{(from @lh-ui/share/core/grid)}

export type LhGridBreakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl'

Constants

Public constants used by this component (linked from the Type / Default columns in the Props table above):

LH_GRID_COLUMNS _{(from @lh-ui/share/core/grid)}

export const LH_GRID_COLUMNS = 24

LH_GRID_BREAKPOINTS _{(from @lh-ui/share/core/grid)}

export const LH_GRID_BREAKPOINTS: Record<LhGridBreakpoint, number> = {
  xs: 0,
  sm: 640,
  md: 768,
  lg: 1024,
  xl: 1280,
}

LH_GRID_BREAKPOINT_ORDER _{(from @lh-ui/share/core/grid)}

export const LH_GRID_BREAKPOINT_ORDER: LhGridBreakpoint[] = ['xl', 'lg', 'md', 'sm', 'xs']

Grid ​

Basic usage ​

Offset and alignment ​

Wrap ​

Responsive breakpoints ​

Push / pull ​

Pull and responsive breakpoints ​

API ​

LhRow Props ​

LhCol Props ​

Accessibility ​

Type Definitions ​

Constants ​

Grid

Basic usage

Offset and alignment

Wrap

Responsive breakpoints

Push / pull

Pull and responsive breakpoints

API

LhRow Props

LhCol Props

Accessibility

Type Definitions

Constants