[CSS] Grid - fr 단위와 minmax()

1. fr 단위란?

fr은 Grid에서 남는 공간을 비율로 나누는 단위입니다.
*fraction(분수)*의 약자

grid-template-columns: 1fr 2fr;

• 전체 남는 공간을 1 : 2 비율로 분배
• 첫 번째 열은 1/3
• 두 번째 열은 2/3

fr은 고정값(px, %)을 제외한 나머지 공간을 기준으로 계산됩니다.

 

자주 쓰는 패턴

grid-template-columns: repeat(3, 1fr);

grid-template-columns: 1fr 1fr 1fr;
/* 위와 같은 코드 */

동일한 너비의 3열 레이아웃

 

2. minmax()란?

minmax()는 최소값과 최대값을 동시에 지정하는 함수입니다.

minmax(최소값, 최대값)

grid-template-columns: minmax(200px, 1fr);

 

• 최소 200px은 유지
• 여유 공간이 있으면 1fr까지 확장
• 반응형에서 안전한 레이아웃

 

3. fr + minmax() 조합 (실무 핵심)

grid-template-columns: repeat(3, minmax(150px, 1fr));

 

• 컬럼은 최소 150px
• 화면이 커지면 균등 확장
• 화면이 작아져도 깨지지 않음

반응형 카드 레이아웃에서 가장 많이 쓰임

 

 

4. 정리하면

fr은 공간을 나누는 기준이고,
minmax()는 그 공간이 깨지지 않게 지켜주는 안전장치다.
둘을 함께 쓰면 가장 안정적인 Grid 레이아웃을 만들 수 있다.