CSS Grid에서 Text Ellipsis가 안 되는 이유와 minmax(0, 1fr) 해결법

TL;DR#

CSS Grid 아이템 안에서 overflow: hidden; white-space: nowrap; text-overflow: ellipsis를 줘도 말줄임이 안 되고 셀이 텍스트 길이만큼 늘어나는 경우가 있습니다.
원인은 그리드 아이템의 기본 min-width가 auto이고, 이 값이 콘텐츠의 min-content(긴 텍스트 전체 길이)를 따르기 때문입니다.
grid-template-columns: repeat(3, minmax(0, 1fr))처럼 최소값을 0으로 명시하면 아이템이 콘텐츠 너비에 구애받지 않고 줄어들어 말줄임이 정상 동작합니다.

문제 상황#

CSS Grid는 레이아웃을 구성할 때 강력한 도구입니다. 특히 grid-template-columns: repeat(3, 1fr)은 컨테이너를 균등하게 3등분하는 직관적인 방법입니다.

문제는 이 그리드 아이템 안에서 긴 텍스트를 한 줄로 제한하고 말줄임표를 표시하려 할 때 발생합니다. 아래와 같은 표준 말줄임 스타일을 적용해도, 텍스트가 부모 너비를 무시하고 삐져나오거나 그리드 셀 자체가 텍스트 길이에 맞춰 늘어나 버립니다.

/* 일반적인 텍스트 말줄임 설정 */
.title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

대시보드나 포스트 리스트 카드를 구현할 때 자주 마주치는 CSS 이슈입니다.

원인: 그리드 아이템의 최소 너비 계산 방식#

이 문제를 처음 만나면 z-index나 position: absolute 같은 엉뚱한 속성을 건드리기 쉽습니다. 하지만 근본 원인은 그리드 아이템의 최소 너비 계산 방식에 있습니다.

CSS Grid 명세에 따르면, 그리드 아이템의 기본 최소 크기(min-width)는 auto입니다. 그리고 이 auto는 내부 콘텐츠의 크기인 min-content를 따르려 합니다.

white-space: nowrap이 설정된 긴 텍스트가 있다면, 그 아이템의 min-content는 텍스트 전체 길이가 됩니다. 결과적으로 1fr은 min-content보다 작아질 수 없게 되어, 말줄임표가 나타나기 전에 그리드 자체가 늘어나 버립니다.

해결 방법#

해결 방법은 두 가지로 정리할 수 있습니다.

min-width: 0 설정: 그리드 아이템 자체에 최소 너비를 강제로 0으로 지정합니다.
minmax(0, 1fr) 사용: 그리드 트랙 정의 단계에서 최소 크기를 0으로 명시합니다.

둘 다 효과는 같지만, 더 선언적이고 그리드 시스템의 의도에 부합하는 minmax(0, 1fr) 방식을 권장합니다. 그리드를 정의할 때 최소값을 0으로 명시해 주면 됩니다.

수정 전 코드#

const GridContainer = styled.div`
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 문제 발생 지점 */
  gap: 20px;
`;

수정 후 코드#

const GridContainer = styled.div`
  display: grid;
  /* minmax(0, 1fr)을 통해 최소 너비를 0으로 제한 */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
`;

이렇게 설정하면 그리드 아이템은 콘텐츠 너비(min-content)에 구애받지 않고 부모가 허용하는 너비까지 줄어듭니다. 이때 아이템 내부의 overflow: hidden과 만나면서 비로소 text-overflow: ellipsis가 정상적으로 동작합니다.

결과와 한계#

해결 후 얻는 효과는 다음과 같습니다.

레이아웃 안정성: 긴 타이틀이 들어와도 전체 그리드 레이아웃이 깨지지 않습니다.
반응형 대응: 화면이 작아질 때 그리드 셀이 유연하게 축소되며 말줄임 처리가 자연스럽게 이루어집니다.

다만 트레이드오프도 있습니다. 너무 좁은 영역에서 무리하게 말줄임을 적용하면 사용자가 정보를 식별하기 어려울 수 있습니다. 이럴 때는 툴팁을 제공하거나, 반응형 브레이크포인트에서 그리드 열 개수를 조절하는 전략을 함께 써야 합니다.

마치며#

CSS Grid는 편리하지만 fr 단위와 auto 너비 계산 사이의 미묘한 관계를 이해하지 못하면 이번 사례처럼 고전할 수 있습니다. "그리드 아이템 안에서 말줄임이 안 되면 minmax(0, 1fr)을 떠올리자"는 공식만 기억해도 디버깅 시간을 크게 아낄 수 있습니다.

참고 자료#

TL;DR#

CSS Grid 아이템 안에서 overflow: hidden; white-space: nowrap; text-overflow: ellipsis를 줘도 말줄임이 안 되고 셀이 텍스트 길이만큼 늘어나는 경우가 있습니다.
원인은 그리드 아이템의 기본 min-width가 auto이고, 이 값이 콘텐츠의 min-content(긴 텍스트 전체 길이)를 따르기 때문입니다.
grid-template-columns: repeat(3, minmax(0, 1fr))처럼 최소값을 0으로 명시하면 아이템이 콘텐츠 너비에 구애받지 않고 줄어들어 말줄임이 정상 동작합니다.

문제 상황#

CSS Grid는 레이아웃을 구성할 때 강력한 도구입니다. 특히 grid-template-columns: repeat(3, 1fr)은 컨테이너를 균등하게 3등분하는 직관적인 방법입니다.

/* 일반적인 텍스트 말줄임 설정 */
.title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

대시보드나 포스트 리스트 카드를 구현할 때 자주 마주치는 CSS 이슈입니다.

원인: 그리드 아이템의 최소 너비 계산 방식#

CSS Grid 명세에 따르면, 그리드 아이템의 기본 최소 크기(min-width)는 auto입니다. 그리고 이 auto는 내부 콘텐츠의 크기인 min-content를 따르려 합니다.

해결 방법#

해결 방법은 두 가지로 정리할 수 있습니다.

min-width: 0 설정: 그리드 아이템 자체에 최소 너비를 강제로 0으로 지정합니다.
minmax(0, 1fr) 사용: 그리드 트랙 정의 단계에서 최소 크기를 0으로 명시합니다.

수정 전 코드#

const GridContainer = styled.div`
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 문제 발생 지점 */
  gap: 20px;
`;

수정 후 코드#

const GridContainer = styled.div`
  display: grid;
  /* minmax(0, 1fr)을 통해 최소 너비를 0으로 제한 */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
`;

결과와 한계#

해결 후 얻는 효과는 다음과 같습니다.

레이아웃 안정성: 긴 타이틀이 들어와도 전체 그리드 레이아웃이 깨지지 않습니다.
반응형 대응: 화면이 작아질 때 그리드 셀이 유연하게 축소되며 말줄임 처리가 자연스럽게 이루어집니다.

TL;DR#

문제 상황#

원인: 그리드 아이템의 최소 너비 계산 방식#

해결 방법#

수정 전 코드#

수정 후 코드#

결과와 한계#

마치며#

참고 자료#

관련 글

TL;DR#

문제 상황#

원인: 그리드 아이템의 최소 너비 계산 방식#

해결 방법#

수정 전 코드#

수정 후 코드#

결과와 한계#

마치며#

참고 자료#

관련 글