← 목록으로
스페이싱/그리드 시스템
4px 기반 스케일, 컨테이너, 브레이크포인트, Z-index
컨테이너 너비
sm - 640px
Small container for narrow content
md - 768px
Medium container for standard content
lg - 1024px
Large container for wide layouts
xl - 1280px
Extra large container for maximum width
12 컬럼 그리드 시스템
16px gap 기본값
12 columns
6 columns
6 columns
4 columns
4 columns
4 columns
3 col
3 col
3 col
3 col
88. 스페이싱/그리드 시스템
Define spacing and layout system:
**Spacing Scale** (base: 4px):
- 0: 0px
- px: 1px
- 0.5: 2px
- 1: 4px
- 1.5: 6px
- 2: 8px
- 2.5: 10px
- 3: 12px
- 3.5: 14px
- 4: 16px
- 5: 20px
- 6: 24px
- 7: 28px
- 8: 32px
- 9: 36px
- 10: 40px
- 11: 44px
- 12: 48px
- 14: 56px
- 16: 64px
- 20: 80px
- 24: 96px
- 32: 128px
**Common Usage**:
- Inline elements gap: 8px (2)
- Stack elements gap: 16px (4)
- Section padding: 24-32px (6-8)
- Card padding: 16-24px (4-6)
- Page margin: 16-24px mobile, 32px+ desktop
**Container Widths**:
- sm: 640px
- md: 768px
- lg: 1024px
- xl: 1280px
- 2xl: 1536px
- Full: 100%
**Grid System**:
- 12 columns
- Gap: 16px mobile, 24px tablet, 32px desktop
- Responsive breakpoints
**Breakpoints**:
- sm: 640px
- md: 768px
- lg: 1024px
- xl: 1280px
- 2xl: 1536px
**Layout Patterns**:
- Single column: max-width centered
- Two column: 60/40, 50/50, sidebar layouts
- Three column: equal or varied
- Grid: 2, 3, 4 column responsive
**Component Spacing**:
- Form field gap: 20px vertical
- Button gap: 12px horizontal
- Card margin: 24px
- Section margin: 64-96px
**Z-Index Scale**:
- base: 0
- dropdown: 10
- sticky: 20
- fixed: 30
- modal-backdrop: 40
- modal: 50
- popover: 60
- tooltip: 70
- toast: 80
Tech: Tailwind spacing config + CSS Grid + Flexbox