CSS Grid 및 clamp 함수 기반의 해상도 독립적 Responsive Layout 구현

Context

Browser Extension New Tab Page 특성상 제어 불가능한 다양한 Viewport Size 대응 필요. 1080p부터 4K까지 폭넓은 해상도 범위에서 레이아웃 일관성을 유지해야 하는 제약 조건 존재.

Technical Solution

• auto-fit과 minmax(280px, 1fr) 조합을 통한 Media Query 없는 다이나믹 컬럼 생성 구조 설계
• auto-fill 기반의 Clocks Grid 구성을 통한 콘텐츠 좌측 정렬 및 최소 너비 유지 전략 채택
• clamp() 함수를 활용하여 1.5rem에서 3rem 사이의 가변적 Font Size 제어 및 Viewport 종속성 해결
• min-height: 100vh와 Flexbox Centering 결합으로 화면 크기 및 콘텐츠 높이에 상관없는 수직/수평 중앙 정렬 구현
• 특정 컴포넌트(Weather Card)에 대해 grid-column: span 2를 적용한 계층적 레이아웃 우선순위 부여