그리드 컨테이너 내에서 남은 공간에 대한 차지하는 비율 값을 나타낸다.
다음과 같이 작성할 수 있다.
1fr /* 정수(integer) */
1.5fr /* 소수(float) */
퍼센트지 단위와 다른 점은 아래 코드에서 확인할 수 있다.
grid-template-columns: repeat(3, 1fr)
grid-template-columns: repeat(3, calc(100% / 3))
똑같이 3개의 column을 같은 비율로 설정하지만 설정 값에 접근 방식이 다름을 알 수 있다.
Modules | ||
---|---|---|
Module Name | Status | Summary |
CSS Grid Layout Module Level 2 | 후보 추천 초안 | 사용자 인터페이스 설계에 최적화된 2차원 그리드 기반 레이아웃 시스템을 정의한다. Last review date: 2022-6-23 |