고정된 레이아웃을 설계한다면 grid-template-*만으로 충분하다.
하지만 아이템 개수가 유동적이거나 몇 행/몇 열이 될지 모르는 경우에는 grid-auto-*로 자동으로 생길 행·열의 기본 크기를 지정해두는 것이 좋다.
grid-template-rows / grid-template-columns
디자이너가 직접 명시적으로 설계한 격자(그리드 선)를 정의하는 속성이다.
예를 들어 "1행은 100px, 2행은 200px, 3행은 1fr" 이런 식으로 구체적으로 몇 행, 몇 열을 만들지 지정할 수 있다.
아이템이 이 설계된 범위 안에서만 배치된다면 grid-auto-*는 필요하지 않다.
grid-auto-rows / grid-auto-columns
템플릿에 없는 행이나 열이 필요할 때 자동으로 만들어지는 격자의 크기를 정의하는 속성이다.
예를 들어 grid-template-rows: 100px 100px; 로 두 줄만 정의했는데, 아이템을 grid-row: 3에 배치하면 템플릿에 3행이 없으므로 브라우저가 새로운 행을 만든다.
이때 새로 생기는 행의 높이를 얼마로 할지는 grid-auto-rows 값으로 결정된다.
즉, 템플릿 밖으로 나간 아이템을 수용하기 위한 안전장치 역할을 한다.
개발을 잘 하기 위한 여정