Advanced CSS Grid

grid-template-areas*
 각 영역(Grid Area)에 이름을 붙이고, 그 이름을 이용해 배치하는 방법
 각자 차지하는 셀의 개수만큼 해당 위치에 이름 써주기!
 각 셀마다 공백 하나씩 넣어서 구분하기..
 빈칸은 마침표 또는 "none"
  ex) grid-template-areas:
                "header  header  header"
                 "  a     main     b   "
                 "  .       .      .   "
                "footer  footer  footer";
 각 영역의 이름은 해당 아이템 엘리먼트에 grid-area 속성으로 이름 지정
  ex) .header { grid-area: header; }
      .sidebar-a { grid-area: a; }
      /* 이름 값에 따옴표 없는 것에 주의 */
      
 + 엘리먼트를 겹칠 때 +
   grid 라인 이름과 grid-area 속성 이용하기

*justify items*
 가로 방향 정렬(row 축)
 start   : 왼쪽에 정렬
 end     : 오른쪽에 정렬
 center  : 중앙에 정렬
 stretch : 영역 채우기 위해 위아래로 쭉 늘림

*justify-content*
 item그룹 가로 정렬
 grid item들의 너비를 모두 합한 값이 grid container의 너비보다
 작을 때 grid item들을 통째로 정렬
 start         : 왼쪽 정렬
 end           : 오른쪽 정렬
 center        : 수평 중앙 정렬
 stretch       : 크기를 늘려 수평으로 확장
 space-around  : 각면에 균일한 공간 포함하고 첫 엘리먼트 앞과
                 마지막 엘리먼트 뒤에 있는 엘리먼트 사이의 공간이 두배
 space-between : item사이에 균일한 공간 포함하고 양끝에 공백없이 
 space-evenly  : item사이와 양끝에 균일한 공간으로 배치
 
*align-items*
 세로 방향 정렬(column 축)
 start   : 위쪽 정렬
 end     : 아래쪽 정렬  
 center  : 중앙 정렬
 stretch : 쭉 늘림
  
*align-content*
 item그룹 세로 정렬
 grid item들의 높이를 모두 합한 값이 grid container의 높이보다
 작을 때 grid item들을 통째로 정렬
 start         : 위쪽 정렬
 end           : 아래쪽 정렬
 center        : 수직 중앙 정렬
 stretch       : 크기를 늘려 수직으로 확장
 space-around  : 각면에 균일한 공간 포함하고 첫 엘리먼트 앞과
                 마지막 엘리먼트 뒤에 있는 엘리먼트 사이의 공간이 두배
 space-between : item사이에 균일한 공간 포함하고 양끝에 공백없이 
 space-evenly  : item사이와 양끝에 균일한 공간으로 배치
 
*justify-self*
 개별 아이템 가로 정렬
 해당 item을 가로방향(row 축)으로 정렬
 start         : 왼쪽 배치
 end           : 오른쪽 배치
 center        : 중앙 배치
 stretch       : 쭉 늘림
 
*align-self*
 개별 아이템 세로 정렬
 해당 item을 세로방향(column 축)으로 정렬
 start         : 위쪽 배치
 end           : 아래쪽 배치
 center        : 중앙 배치
 stretch       : 쭉 늘림
 
*grid-auto-columns, grid-auto-rows*
 그리드 형태를 자동으로 정의
 grid-template-columns, grid-template-rows의 통제를 벗어난 
 위치에 있는 트랙의 크기를 지정하는 속성
  즉, column이나 row의 개수를 미리 알 수 없는 경우
      auto 써주면 굳이 횟수를 지정해서 반복할 필요없이 "알아서" 처리됨
   px / % / fr / repeat() 써서 지정해주기
      
*grid-auto-flow*
 item이 자동 배치되는 흐름을 결정하는 속성
 row    : 왼쪽에서 오른쪽으로 행을 채우고     
          엘리먼트가 너무 많을 때 새 행 작성
 column : 위쪽에서 아래쪽으로 열을 채우고 
          엘리먼트가 너무 많을 때 새 열 작성
 dense  : 빈 셀을 채우는 알고리즘
          row dense, column dense 와 같이 
          row와 column에 따라 기준 달라짐