grid track 생성(제어) - 실무에서 사용할 코드

# grid track 생성(제어) 실무 사용 확률 99%

.container {
    display: grid;
    grid: 80px 1fr / 120px 1fr; /* <'grid-template-rows'> / <'grid-template-columns'> */
}

- 2열 2행 트랙 단축 문법
- 트랙의 크기와 수량을 명시적으로 제어.
- 실무에서 가장 빈번하게 사용하는 패턴.
- 명시적으로 선언하지 않는 나머지 트랙은 자동.

- fr은 fraction(분수, 분할)의 약자.

- 첫번째 행의 높이가 80px가 적용되고, 나머지행은 1fr 즉, 자동으로 결정되는 높이값. / 첫번째 열의 폭은 120px으로 결정이 되고, 나머지는 1fr로 결정이 된다.