fr 단위

사용법

그리드 트랙 사이즈로 사용 되는 fr 단위는 유연한 단위로 그리드 컨테이너의 여유 공간을 비율로 나눠 설정합니다. 퍼센트(%) 단위와 유사해 보일 수 있으나, 퍼센트 값과 다르게 길이가 아닙니다. 그래서 calc() 함수에서 다른 값과 함께 처리할 수 없습니다.

예시

.grid-container {
  display: grid;
  /* Fraction(fr) 단위 */
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 1fr 1.3fr 1fr; 
}

레퍼런스

CSS Grid Layout Module Level 1www.w3.org

w3.org/TR/css-grid-1/#fr-unit