같은 1fr인데 카드가 화면을 밀어낼 때: 그리드의 최소 너비

긴 주소 하나를 넣자 두 칸의 폭이 달라집니다

두 카드를 1fr씩 나눴는데 한쪽에 긴 주소를 넣는 순간 오른쪽 카드가 화면 밖으로 밀릴 수 있습니다. 남은 폭을 똑같이 나누는 값과 내용이 줄어들 수 있는 최소 크기가 서로 다른 조건이기 때문입니다. 폰트를 작게 만들기 전에 트랙, 카드, 카드 안 문자열을 따로 봐야 합니다.

예제는 폭이 제한된 두 칸 그리드에 끊어지지 않는 파일 식별 문자열을 넣습니다. 왼쪽은 1fr 1fr과 기본 최소 크기를, 오른쪽은 트랙의 최소값 0과 자식의 줄바꿈을 함께 사용합니다. 같은 문자열을 남겨 둔 채 어느 제약을 바꾸었는지 비교하는 화면입니다.

트랙·카드·문자열을 세 층으로 나눕니다

MDN은 그리드·플렉스 항목의 자동 최소 너비가 조건에 따라 min-content 크기를 사용한다고 설명합니다. 그래서 긴 문자열이 열의 최소 크기를 끌어올릴 수 있습니다. minmax(0, 1fr)은 트랙의 하한을 명시하지만, 자식 안의 고정 폭이나 줄바꿈 규칙까지 모두 고쳐 주는 것은 아닙니다.

같은 내용을 유지한 채 세 규칙을 맞춥니다

.cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.card { min-width: 0; }
.card .reference { overflow-wrap: anywhere; }

트랙은 필요하면 0까지 줄어들 수 있고, 카드는 자동 최소 너비 때문에 버티지 않으며, 주소는 카드 안에서 줄을 바꿀 수 있게 했습니다. 셋을 한 덩어리의 만능 처방으로 외우기보다 어느 층에서 넓어졌는지 확인하고 필요한 규칙만 적용합니다.

코드나 표처럼 가로 관계를 유지해야 하는 자료라면 무조건 anywhere로 자르는 것이 맞지 않을 수 있습니다. 그 부분에만 스크롤을 두고 일반 본문을 밀어내지 않게 할 수 있습니다. 반대로 주소를 보여주는 정보 카드라면 전체 주소가 읽히는 줄바꿈이 더 알맞을 수 있습니다.

스크롤 너비로 조사한 뒤 화면을 읽습니다

const box = document.querySelector('.cards');
console.table({
  clientWidth: box.clientWidth,
  scrollWidth: box.scrollWidth,
  overflow: box.scrollWidth > box.clientWidth
});

숫자는 조사할 상자를 찾는 단서입니다. scrollWidth가 더 크면 내부의 무엇이 폭을 늘리는지 카드와 이미지, 긴 텍스트로 내려가며 확인합니다. 카드 밖으로 나온 그림자처럼 레이아웃과 다른 시각적 요소도 있으므로 마지막에는 실제 화면을 봅니다. 페이지 전체와 카드 내부의 스크롤도 나누어 기록합니다.

overflow:hidden으로 넘친 부분만 덮으면 비교값은 달라질 수 있지만 주소의 뒷부분이나 버튼이 없어질 수 있습니다. “가로 스크롤이 사라졌다”와 “같은 정보를 읽을 수 있다”를 함께 확인해야 합니다. 잘림 자체를 찾는 절차는 모바일 본문 검사와 연결됩니다.

짧은 제목으로 돌아갔을 때도 균형을 봅니다

• 긴 문자열을 일반 문장으로 바꾸었을 때 두 열이 정상으로 돌아오는가.
• 한 카드에 이미지가 있어도 파일의 고정 폭이 열을 다시 늘리지 않는가.
• 한 열로 바뀌는 작은 화면에서 버튼과 주소의 전체 내용이 남는가.
• 코드와 표에 필요한 가로 이동까지 줄바꿈으로 망가뜨리지 않았는가.

이 예제에서 고치는 것은 글자의 양이 아니라 크기 제약의 연결입니다. 어느 트랙이 줄어들 수 있고 어느 내용이 줄을 바꿀 수 있는지 정리하면, 긴 상품명이나 파일 이름이 새로 들어와도 원인을 좁힐 수 있습니다.

예제를 직접 열어 보기

이 글의 화면 예제와 소스 받기 ZIP. 압축을 푼 뒤 index.html을 브라우저에서 열 수 있습니다. 예제의 입력과 표시 범위는 각 화면의 안내를 기준으로 확인하세요.

참고한 원문

• MDN: minmax()
• MDN: min-width