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

접근성

타입 정의

상수