Grid 그리드

24열 그리드 시스템입니다. LhRow로 정렬과 간격을, LhCol로 스팬, 오프셋, 반응형 중단점을 제어합니다.

그리드

<template>
  <div>
    <p class="demo-note">기본 그리드(24열) + gutter 간격</p>
    <LhRow :gutter="16">
      <LhCol :span="8"><div class="grid-cell">span=8</div></LhCol>
      <LhCol :span="8"><div class="grid-cell">span=8</div></LhCol>
      <LhCol :span="8"><div class="grid-cell">span=8</div></LhCol>
    </LhRow>
    <p class="demo-note">offset / push / pull</p>
    <LhRow :gutter="12">
      <LhCol :span="6" :offset="6"><div class="grid-cell">offset=6</div></LhCol>
      <LhCol :span="6" :push="6"><div class="grid-cell">push=6</div></LhCol>
    </LhRow>
    <p class="demo-note">정렬: justify / align</p>
    <LhRow
      justify="center"
      align="middle"
      style="height: 60px; background: var(--lh-bg-color-page, #f6f1ea); border-radius: 6px"
    >
      <LhCol :span="6"><div class="grid-cell">가운데</div></LhCol>
    </LhRow>
    <p class="demo-note">반응형 중단점: :sizes=&#123; xs: 24, sm: 12, md: 8 &#125;</p>
    <LhRow :gutter="12">
      <LhCol v-for="i in 6" :key="i" :sizes="{ xs: 24, sm: 12, md: 8 }">
        <div class="grid-cell">반응형 열 {{ i }}</div>
      </LhCol>
    </LhRow>
  </div>
</template>

팁

demo의 .grid-cell는 예시 스타일(회색 배경, 둥근 모서리)일 뿐, 라이브러리 자체에서 제공하지 않습니다.

Row Props

프로퍼티	설명	타입	기본값
justify	주축 정렬	'start' \| 'end' \| 'center' \| 'space-between' \| 'space-around'	'start'
align	교차축 정렬	'top' \| 'middle' \| 'bottom'	'top'
gutter	열 간격 (px 또는 [가로, 세로])	number \| [number, number]	0
wrap	줄 바꿈 허용	boolean	true
sx	sx 레이아웃 단축 속성	—	—

Col Props

프로퍼티	설명	타입	기본값
span	차지하는 열 수 (24 그리드 기준)	number	—
offset	왼쪽 오프셋 열 수	number	0
push	오른쪽으로 이동하는 열 수	number	0
pull	왼쪽으로 이동하는 열 수	number	0
xs / sm / md / lg / xl	중단점 스팬: <640 / ≥640 / ≥768 / ≥1024 / ≥1280px	number	—
sizes	중단점별 일괄 선언 (xs~xl과 동일)	{ xs?, sm?, md?, lg?, xl? }	—
sx	sx 레이아웃 단축 속성	—	—