Podo UI

Podo UI

그리드

반응형 그리드 시스템

그리드 시스템

Podo UI는 반응형 그리드 시스템을 제공합니다. PC에서는 12칸, 태블릿에서는 6칸, 모바일에서는 4칸으로 자동 조정됩니다.

PC (1280px~)

12칸 그리드

Tablet (768px~1279px)

6칸 그리드

Mobile (~767px)

4칸 그리드

기본 그리드

grid 클래스를 사용하여 자동 반응형 그리드를 생성합니다:

HTML
<section class="grid">
  <div class="w-4">4칸 (33.33%)</div>
  <div class="w-4">4칸 (33.33%)</div>
  <div class="w-4">4칸 (33.33%)</div>
  <div class="w-6">6칸 (50%)</div>
  <div class="w-6">6칸 (50%)</div>
  <div class="w-12">12칸 (100%)</div>
</section>
실제 예제:
w-4
w-4
w-4
w-6
w-6
w-12

그리드 칸 크기

w-1부터 w-12까지 사용 가능합니다:

모든 칸 크기:
w-12 (100%)
w-11
w-1
w-10
w-2
w-9
w-3
w-8
w-4
w-7
w-5
w-6
w-6

고정 칼럼 그리드

grid-fix-N 클래스를 사용하여 고정된 칼럼 수의 그리드를 만들 수 있습니다 (2~6칸):

HTML
<!-- 2칸 고정 그리드 -->
<section class="grid grid-fix-2">
  <div class="w-1_2">50%</div>
  <div class="w-1_2">50%</div>
</section>

<!-- 3칸 고정 그리드 -->
<section class="grid grid-fix-3">
  <div class="w-1_3">33.33%</div>
  <div class="w-2_3">66.67%</div>
</section>

<!-- 4칸 고정 그리드 -->
<section class="grid grid-fix-4">
  <div class="w-1_4">25%</div>
  <div class="w-3_4">75%</div>
</section>
2칸 고정 (grid-fix-2):
w-1_2 (50%)
w-1_2 (50%)
3칸 고정 (grid-fix-3):
w-1_3
w-2_3
4칸 고정 (grid-fix-4):
w-1_4
w-1_4
w-2_4
5칸 고정 (grid-fix-5):
w-2_5
w-3_5
6칸 고정 (grid-fix-6):
w-2_6
w-4_6

전체 너비

w-full 클래스는 현재 그리드의 전체 너비를 차지합니다:

HTML
<section class="grid">
  <div class="w-4">4칸</div>
  <div class="w-4">4칸</div>
  <div class="w-4">4칸</div>
  <div class="w-full">전체 너비 (PC: 12칸, Tablet: 6칸, Mobile: 4칸)</div>
</section>
실제 예제:
w-4
w-4
w-4
w-full

반응형 동작

그리드는 화면 크기에 따라 자동으로 조정됩니다. 브라우저 창 크기를 조절하여 확인해보세요:

브레이크포인트:
  • PC: 1280px 이상 (12칸 그리드, 간격 24px)
  • Tablet: 768px ~ 1279px (6칸 그리드, 간격 16px)
  • Mobile: 767px 이하 (4칸 그리드, 간격 16px)

일반 요소 너비

grid 클래스가 아닌 일반 요소에서도 w-1 ~ w-12, w-full 클래스를 사용하여 너비를 지정할 수 있습니다. 이 경우 12칸 기준 백분율로 계산됩니다:

HTML
<!-- grid 외부에서 사용 -->
<div>
  <div class="w-3">25% width</div>
  <div class="w-6">50% width</div>
  <div class="w-9">75% width</div>
  <div class="w-12">100% width</div>
  <div class="w-full">100% width</div>
</div>
실제 예제:
w-3 (25%)
w-6 (50%)
w-9 (75%)
w-12 (100%)
w-full (100%)
grid 내부가 아닌 일반 요소에서는 w-1은 8.33%, w-6은 50%, w-12는 100% 너비를 가집니다.

픽셀 너비

w-0px부터 w-5000px까지 사용하여 정확한 픽셀 단위의 너비를 지정할 수 있습니다:

HTML
<div class="w-100px">100px width</div>
<div class="w-200px">200px width</div>
<div class="w-300px">300px width</div>
<div class="w-500px">500px width</div>
실제 예제:
w-100px
w-200px
w-300px
w-500px
픽셀 너비는 모든 요소에서 사용할 수 있으며, 반응형과 무관하게 고정된 너비를 가집니다.