Rejilla

Sistema de 24 columnas, implementado con CSS Grid (grid-template-columns: repeat(24, 1fr)): span / offset se traducen directamente a grid-column, sin necesidad de conversiones de porcentajes propias de flex.

Uso básico

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>

Desplazamiento y alineación

offset 3

Centrado

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

Ajuste de línea

Cuando wrap está desactivado, los elementos secundarios quedan forzados a una sola fila (junto con overflow, permite implementar una rejilla con desplazamiento horizontal).

span 8

vue

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

<template>
  <!-- Sin ajuste de línea -->
  <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>
  <!-- Sin ajuste de línea -->
  <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>

Puntos de interrupción responsivos

xs / sm / md / lg / xl declaran tamaños por tramos (umbrales de Tailwind: 640 / 768 / 1024 / 1280); los tramos no declarados retroceden al siguiente menor (xs sirve siempre como valor de respaldo) y, si no se declara ningún punto de interrupción, se aplica span. Redimensiona la ventana del navegador para ver los cambios.

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>

Desplazamiento (push / pull)

push / pull desplazan el punto de partida sobre la base de offset (a la derecha / a la izquierda); sirven para el ajuste fino de la posición de las columnas.

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>

Retroceso y comportamiento responsivo

pull hace retroceder la columna hacia la izquierda el número de columnas indicado (lo opuesto a offset); con xs / sm / md / lg / xl se declara el span por punto de interrupción, y con sizes puede declararse todo a la vez.

pull 2

Responsivo

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

API

LhRow Props

Prop	Descripción	Tipo	Predeterminado
justify	Distribución en el eje principal	`'start' \| 'center' \| 'end' \| 'space-between' \| 'space-around'`	`'start'`
align	Alineación en el eje secundario	`'top' \| 'middle' \| 'bottom'`	`'top'`
gutter	Separación entre columnas (px o [horizontal, vertical])	`number \| [number, number]`	`0`
wrap	Si se ajusta a la línea	`boolean`	`true`
sx	Props de disposición rápida	`LhSxProps`	—

LhCol Props

Prop	Descripción	Tipo	Predeterminado
span	Número de columnas que ocupa (sistema de 24 columnas)	`number`	—
offset	Número de columnas de desplazamiento a la izquierda	`number`	—
push	Número de columnas de desplazamiento a la derecha	`number`	—
pull	Número de columnas de desplazamiento a la izquierda	`number`	—
xs	Aplica a <640 px (si no se declara, retrocede al tramo menor)	`LhColSize`	—
sm	Aplica a ≥640 px	`LhColSize`	—
md	Aplica a ≥768 px	`LhColSize`	—
lg	Aplica a ≥1024 px	`LhColSize`	—
xl	Aplica a ≥1280 px	`LhColSize`	—
sizes	Declaración por lotes por punto de interrupción (equivalente a xs~xl; usa una de las dos)	`Partial<Record<LhGridBreakpoint, LhColSize>>`	—
sx	Props de disposición rápida	`LhSxProps`	—

Accesibilidad

Es un componente puramente de disposición, sin semántica de interacción; no uses la rejilla para estructurar listas que requieran semántica (debes usar List / Table, etc.)

Definiciones de tipos

Las estructuras de tipos TypeScript exportadas por este componente (extraídas automáticamente de packages/components/grid/src/types.ts y de las fuentes @lh-ui/share/core/*; abre cada entrada para ver la definición completa; la descripción de los atributos está en la tabla de Props de arriba):

LhRowJustify

/** Distribución de los elementos secundarios en el eje principal */
export type LhRowJustify = 'start' | 'center' | 'end' | 'space-between' | 'space-around'

LhRowAlign

/** Alineación de los elementos secundarios en el eje secundario */
export type LhRowAlign = 'top' | 'middle' | 'bottom'

LhRowProps

export interface LhRowProps {
  /** Distribución en el eje principal */
  justify?: LhRowJustify
  /** Alineación en el eje secundario */
  align?: LhRowAlign
  /** Separación entre columnas (px o [horizontal, vertical]) */
  gutter?: number | [number, number]
  /** Si se ajusta a la línea */
  wrap?: boolean
  /** Props de disposición rápida */
  sx?: LhSxProps
}

LhColProps

export interface LhColProps {
  /** Número de columnas que ocupa (sistema de 24 columnas) */
  span?: number
  /** Número de columnas de desplazamiento a la izquierda */
  offset?: number
  /** Número de columnas de desplazamiento a la derecha */
  push?: number
  /** Número de columnas de desplazamiento a la izquierda */
  pull?: number
  /** Aplica a <640 px (si no se declara, retrocede a un tramo menor) */
  xs?: LhColSize
  /** Aplica a ≥640 px */
  sm?: LhColSize
  /** Aplica a ≥768 px */
  md?: LhColSize
  /** Aplica a ≥1024 px */
  lg?: LhColSize
  /** Aplica a ≥1280 px */
  xl?: LhColSize
  /** Tamaños responsivos declarados por lotes por punto de interrupción (equivalente a xs~xl; usa una de las dos) */
  sizes?: LhBreakpointSizes
  /** Props de disposición rápida */
  sx?: LhSxProps
}

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

/** Configuración de tamaño de Col: número u objeto (admite también un objeto por punto de interrupción) */
export type LhColSize = number | LhGridSpan

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

/** Tamaño de la rejilla (span de 1 a 24, u objeto con offset) */
export interface LhGridSpan {
  span?: number
  offset?: number
  push?: number
  pull?: number
}

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

/** Tamaños responsivos declarados por punto de interrupción (los tramos no declarados retroceden al menor; xs sirve siempre de respaldo) */
export type LhBreakpointSizes = Partial<Record<LhGridBreakpoint, LhColSize>>

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

/** Puntos de interrupción de la rejilla */
export type LhGridBreakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl'

Constantes

Las constantes públicas que utiliza este componente (puedes hacer clic en la entrada del mismo nombre en la columna «Tipo / Predeterminado» de la tabla de Props para saltar aquí):

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

/** Número total de columnas de la rejilla */
export const LH_GRID_COLUMNS = 24

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

/**
 * Puntos de interrupción responsivos (estilo Tailwind, anchura mínima en px):
 * xs es el tramo predeterminado (<640); los demás se aplican a partir de «≥ umbral».
 */
export const LH_GRID_BREAKPOINTS: Record<LhGridBreakpoint, number> = {
  xs: 0,
  sm: 640,
  md: 768,
  lg: 1024,
  xl: 1280,
}

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

/** Orden estable de los puntos de interrupción, de mayor a menor */
export const LH_GRID_BREAKPOINT_ORDER: LhGridBreakpoint[] = ['xl', 'lg', 'md', 'sm', 'xs']

Rejilla ​

Uso básico ​

Desplazamiento y alineación ​

Ajuste de línea ​

Puntos de interrupción responsivos ​

Desplazamiento (push / pull) ​

Retroceso y comportamiento responsivo ​

API ​

LhRow Props ​

LhCol Props ​

Accesibilidad ​

Definiciones de tipos ​

Constantes ​

Rejilla

Uso básico

Desplazamiento y alineación

Ajuste de línea

Puntos de interrupción responsivos

Desplazamiento (push / pull)

Retroceso y comportamiento responsivo

API

LhRow Props

LhCol Props

Accesibilidad

Definiciones de tipos

Constantes