# grid track 생성(제어) 실무 사용 확률 99% .container { display: grid; grid: 80px 1fr / 120px 1fr; /* / */ } - 2열 2행 트랙 단축 문법 - 트랙의 크기와 수량을 명시적으로 제어. - 실무에서 가장 빈번하게 사용하는 패턴. - 명시적으로 선언하지 않는 나머지 트랙은 자동. - fr은 fraction(분수, 분할)의 약자. - 첫번째 행의 높이가 80px가 적용되고, 나머지행은 1fr 즉, 자동으로 결정되는 높이값. / 첫번째 열의 폭은 120px으로 결정이 되고, 나머지는 1fr로 결정이 된다.

# 사용할 확률이 높은 코드 .item { flex: 1 } /* 제일 많이 사용하게 될 코드 */ /* == */ .item { flex: 1 1 } /* == */ .item { flex: 1 1 0} /* flex-grow 또는 flex-shrink 값을 선언하면 flex-basis 값은 'auto'에서 '0'으로 변경된다. */ # 사용 빈도 낮음 ## flex : 0% - flex : 0% // flex-basis 값만 선언한 경우. - 거의 사용하지 않음. .item { flex: 0% } /* == */ .item { flex: 1 0% } /* == */ .item { flex: 1 1 0% } /* flex-grow 초기 값이 0에서 1로 변경된다. */ ## flex : initial ..