CSS 그리드 레이아웃에서 고정된 컨테이너 내 행 높이 문제 해결 방법
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
CSS 그리드 레이아웃을 사용하는 웹 개발자, 특히 고정된 높이 컨테이너 내에서 균일한 행 높이를 구현하는 데 어려움을 겪는 자바스크립트/프론트엔드 개발자
핵심 요약
minmax(100px, 1fr)
사용 시 높이 불균형 발생 원인: 컨테이너의 최대 높이(600px)가 행의 최소 높이 총합(800px)을 초과할 경우, 행이 압축되어 27px 이하로 축소됨- 고정 높이 적용 권장:
grid-template-rows: repeat(8, 75px)
사용 시 8개 행이 600px를 정확히 채우도록 보장 - 대안 전략:
overflow-y: auto
적용하여 컨테이너의 내용물이 흐르도록 허용- 행 수를 줄이거나 다중 열 레이아웃으로 전환
섹션별 세부 요약
1. 문제 현상 설명
- 고정 높이 컨테이너의 특성:
height: 600px
로 설정된 컨테이너 내에서 8개의 행이 100px 이상의 최소 높이를 요구 - 예상 결과 vs 실제 결과:
minmax(100px, 1fr)
을 사용하면 800px의 최소 높이 요구가 600px의 컨테이너 높이를 초과, 마지막 두 행이 27px로 축소
2. `minmax()` 함수의 한계
- 동작 원리:
minmax()
는 최소/최대 높이를 지정하지만, 총 최소 높이가 컨테이너 높이를 초과하면 행이 압축됨 - 문제 유발 요인:
- 8개 행 × 100px = 800px의 최소 높이 요구
- 컨테이너 높이 600px로 인한 공간 부족
3. 해결 방법
- 고정 높이 적용:
```css
grid-template-rows: repeat(8, 75px);
```
- 8개 행 × 75px = 600px로 정확히 채우도록 보장
- 대안 전략:
overflow-y: auto
적용 예시:
```css
.container {
overflow-y: auto;
}
```
- 행 수 줄이기 또는 다중 열 레이아웃 전환
결론
- 핵심 권장사항:
minmax()
대신 고정 높이(75px
)를 사용하여 컨테이너 높이와 정확히 일치시킴overflow-y: auto
적용으로 내용물 흐름 허용- 컨테이너의 최대 높이와 행의 최소 높이 총합이 일치하도록 설계 검토
- 실무 적용 팁: 개발자 도구로 그리드 구조 시각화하여 문제점 식별 후
grid-template-rows
재설정