grid 레이아웃 잡는 레시피(간단 버전)

1. 먼저 전체적으로 크게 보자
   • 컬럼이 어떤 사이즈로 몇 개 있나
     : grid-template-column
   • row가 어떤 사이즈로 몇 개 있냐
     : grid-template-row
2. 레이아웃 안에 있는 각 요소가 column, row를 얼마나 차지해야 하는지 보자:
   • grid-template-area(그리드 컨테이너) & grid-area(그리드 요소)
   • grid-column(그리드 요소)
3. column과 row 사이의 간격이 얼마나 있는지 보자: column-gap, row-gap

• 반응형 대응하기

1. 작은 화면에서의 그리드 레이아웃을 전체적으로 본다
2. … 위의 과정을 반복한다.

참고 영상