1. Grid를 왜 쓸까?

• 레이아웃을 정렬하는 방법으로 float를 사용했지만 수직방향 정렬이 어려움
• flex 로 수평, 수직방향 정렬에 어려움을 해결
• 하지만 item 이 여러 개일 경우 늘어나는 문제 발생
• 2차원 레이아웃 잡는 어려움을 해결하기 위해 grid 를 사용하게 됨

2. Grid 속성

• grid-template-rows : 명시적 행 크기를 정의
• grid-template-columns : 명시적 열 크기를 정의
• grid-auto-rows: 암시적 행 크기를 정의
• grid-auto-columns: 암시적 열 크기를 정의
• gap : 행과 행 사이, 열과 열 사이 간격 정의
• 나머지 속성들은 더 써봐야...

1) grid-template-rows / columns

• 명시적 행과 열의 크기를 정의
• 여러 행, 열을 정의해야할 경우 repeat 을 사용
• repeat(개수, 크기) 로 자동 지정
• 개수를 숫자로 지정해줄 경우 레이아웃이 고정됨
• auto-fill, auto-fit 로 화면 크기에 따라 레이아웃을 자동으로 변경
  👉 auto-fill : 콘텐츠를 채우고 남은 공간을 그대로 둠
  👉 auto-fit : 콘텐츠를 채우고 남은 공간을 콘텐츠가 동일하게 나눠 가짐
• grid-template 줄임 표현으로 / 구분자를 기준으로 행과 열 함께 정의

2) gap

• row-gap 과 column-gap 의 줄임 표현
• 열과 열, 행과 행 사이의 크기를 정의

3) grid-auto-rows / columns

• grid-template 에서 정의한 명시적 행, 열 외부에 배치될 경우 적용
• 이미지 설명
  👉 grid-auto-colums: 100px; 암시적 행을 정의
  👉 grid-template-columns: repeat(3,1fr); 로 3개의 명시적 행을 정의
  👉 grid-column: 4/5;, grid-row: 1/2; 로 특정 아이템을 외부로 이동하여 적용

4) grid-template-areas

• Grid 영역 이름을 참조해 참조 템플릿 생성
• 컨테이너 영역에서 작업이 이뤄져 아이템들에게 지정할 필요가 없음