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등분하는 직관적인 방법입니다.
리소스 압축, 폰트·이미지 최적화, 지연 로딩, CDN 등 프론트엔드 성능을 높이는 8가지 방법을 소개합니다.
2022. 4. 28.FrontendNext.js의 SSR, SSG, ISR 렌더링 전략과 서버 컴포넌트(RSC)의 동작 원리를 비교하고 상황별 선택 기준을 정리합니다.
2026. 3. 28.FrontendV8 같은 현대 JavaScript 엔진이 소스 코드를 토큰화, AST 생성, 바이트코드 변환, JIT 컴파일을 거쳐 기계어로 실행하는 과정을 단계별로 정리합니다.
2024. 11. 25.문제는 이 그리드 아이템 안에서 긴 텍스트를 한 줄로 제한하고 말줄임표를 표시하려 할 때 발생합니다. 아래와 같은 표준 말줄임 스타일을 적용해도, 텍스트가 부모 너비를 무시하고 삐져나오거나 그리드 셀 자체가 텍스트 길이에 맞춰 늘어나 버립니다.
css/* 일반적인 텍스트 말줄임 설정 */ .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보다 작아질 수 없게 되어, 말줄임표가 나타나기 전에 그리드 자체가 늘어나 버립니다.
해결 방법은 두 가지로 정리할 수 있습니다.
0으로 지정합니다.0으로 명시합니다.둘 다 효과는 같지만, 더 선언적이고 그리드 시스템의 의도에 부합하는 minmax(0, 1fr) 방식을 권장합니다. 그리드를 정의할 때 최소값을 0으로 명시해 주면 됩니다.
typescriptconst GridContainer = styled.div` display: grid; grid-template-columns: repeat(3, 1fr); /* 문제 발생 지점 */ gap: 20px; `;
typescriptconst 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)을 떠올리자"는 공식만 기억해도 디버깅 시간을 크게 아낄 수 있습니다.