Сетка

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)}

/** Размер сетки (span от 1 до 24 или объект с 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']

Сетка ​

Базовое использование ​

Сдвиг и выравнивание ​

Перенос строк ​

Адаптивные брейкпоинты ​

Сдвиг (push / pull) ​

Откат и адаптивность ​

API ​

LhRow Props ​

LhCol Props ​

Доступность ​

Типы ​

Константы ​

Сетка

Базовое использование

Сдвиг и выравнивание

Перенос строк

Адаптивные брейкпоинты

Сдвиг (push / pull)

Откат и адаптивность

API

LhRow Props

LhCol Props

Доступность

Типы

Константы