grid

[grid : 두 방향(가로, 세로) 레이아웃 시스템(2차원)]

* 용어정리
- grid container : grid의 전체영역
- grid item : grid 컨테이너의 자식요소들(grid 컨테이너의 셀을 채우는 내용물)
- grid track : grid의 행(row) or 열(column)
- grid cell : grid의 한 칸을 의미. grid item 하나가 들어가는 가상의 칸
- grid line : grid cell을 구분하는 선
- grid number : grid line의 각 번호
- grid gap : grid cell 사이 간격
- grid area : grid line으로 둘러싸인 사각형 영역. grid cell의 집합

* display: grid;
=> 컨테이너에 display: grid; 를 설정하는 것으로 시작함


=======grid 컨테이너에 적용하는 속성들; 전체 아이템에 적용=======
1) 그리드 형태 정의 : grid-template-rows (행의 크기) · grid-template-columns (열의 크기)
   ex) grid-template-rows: 100px 200px auto;
        grid-template-columns:  200px 2fr 1fr;  *fr(fraction) : 비율. 변동폭
        grid-template-columns: repeat(5, 1fr); -> (i) repeat 함수 : 반복되는 값을 자동으로 처리. repeat(5, 1fr) = 1fr 1fr 1fr 1fr 1fr
                                                               cf) repeat(3, 1fr 4fr 2fr)
        grid-template-rows: repeat(3, minmax(100px, auto); -> (ii) minmax 함수 : 최솟값과 최댓값을 지정할 수 있는 함수. minmax(100px, auto) = 최소한 높이 100px은 확보, 내용이 많아 100px이 넘어가면 자동으로 늘어나게
        grid-template-columns: repeat(auto-fill, minmax(20%, auto)); -> (iii) auto-fill 함수 : column의 개수를 미리 정하지 않고, 설정된 너비가 허용하는 한 최대한 셀을 채움
                                                                                    -> column의 auto-fill 크기를 20%로 설정했으므로, 1개의 row에는 5개의 셀이 들어감. 이 때 셀이 모자라서 빈공간이 생기면 빈 채로 놔둠                                            
                                                                                    -> (iv) auto-fit 함수 : auto-fill 대신 auto-fit을 사용하면, 셀이 모자라서 생기는 빈공간을 채움(나머지 셀들의 크기를 균등하게 늘여서 채움)
2) grid cell 사이 간격 설정 : row-gap · column-gap · gap
   ex) row-gap: 10px; 'row 사이 간격을 10px로'
       column-gap: 20px; 'column 사이 간격을 20px로'
       gap: 10px 20px; 'row 사이 간격은 10px, column는 20px로' 
       gap: 20px; 'row, column 사이 간격 20px'
3) grid 형태를 자동으로 정의 : grid-auto-columns · grid-auto-rows
   -> repeat 함수를 사용하여 반복횟수를 지정할 필요 없이 알아서 처리됨
   ex) grid-template-rows: repeat(3, minmax(100px, auto)); 랑 달리, row 갯수를 미리 알 수 없는 경우에
        grid-auto-rows: minmax(100px, auto); 를 써준다    
4) 영역 이름으로 그리드 정의 : grid-template-areas
    -> 각 영역(grid area)에 이름을 붙이고, 그 이름을 이용해서 배치함
    ex) .container{
grid-template-area:                     <- 각 grid area에 이름 붙이고 배치    
"header header header"    <- 셀 이름 사이에 띄어쓰기
"    a        b        c   "
"    .         .         .   "     <- 빈칸(. or none)
"footer  footer  footer";
}
         .header { grid-area: header; }                          <- 아이템 요소에 해당 grid area 이름 연결
         .sidebar-a { grid-area: a; }
         .main-content { grid-area: main; }
         .sidebar-b { grid-area: b; }
         .footer { grid-area: footer;}
5) 자동 배치 : grid-auto-flow
    -> 아이템이 자동 배치되는 흐름을 결정
    ex) grid-auto-flow: row(가로방향으로 순서대로 배치되다가 들어갈 자리가 좁으면 그 공간은 비워두고 아래로 배치), column(세로 ~), 
                            dense(빈 셀을 채움), row dense(가로방향으로 순서대로 배치되다가, 들어갈 자리가 좁으면 다음 순서 아이템들 중 셀렉해서 배치), column dense(세로~);
6) 세로 방향 정렬: align-items
    ex) align-items: stretch, start, center, end;                                                                                             
7) 가로 방향 정렬: justify-items
    ex) justify-items: stretch, start, center, end;
* align-items & justify-items 한번에 : place-items
    ex) place-items: center start;
8) item group 통째로 세로 정렬 : align-content
    ex) align-content: stretch, start, center, end, space-between, space-around, space-evenly;
9) item group 통째로 가로 정렬 : justify-content
    ex) justify-content: stretch, start, center, end, space-between, space-around, space-evenly;
* align-content & justify-content 한번에 : place-content
    ex) place-content: space-between center;


=======grid 아이템에 적용하는 속성들; 해당 아이템에 적용=======
1) 각 cell의 영역 지정 : grid-column-start · grid-column-end · grid-column · grid-row-start · grid-row-end · grid-row                                          
   -> grid line 번호를 이용하여 column과 row의 범위를 결정 
   ex) grid-column-start: 1; 'grid-column line 시작번호 1'
        grid-column-end: 3; 'grid-column line 끝번호 3'
        grid-column: 1 / 3; 'grid-column line 시작번호 1, 끝번호 3' (end를 생략하면 그냥 한 칸)
   ex) grid-column: 1 / span 2; 'grid-column line 1번에서 2칸 차지하기'
        grid-row: 1/ span 3; 'grid-row line 1번에서 3칸 차지하기'
2) 개별 아이템 세로 정렬 : align-self
    ex) align-self: stretch, start, center, end;
3) 개별 아이템 가로 정렬 : justify-self
    ex) justify-self: stretch, start, center, end; 
* align-self & justify-self 한번에 : place-self
    ex) place-self: start center;
4) 배치 순서 : order
5) z축 정렬 : z-index