CSS Grid Essentials

Grid -> 두 방향(가로-세로) 레이아웃 시스템(2차원)
 Flex와 마찬가지로 container, item 필요
 ex) <div class="container">
            <div class="item">A</div>
            <div class="item">B</div>
     </div>
  ---부모 엘리먼트인 div.container를 Grid Container//
     자식 엘리먼트인 div.item들을 Grid Item
     즉!! 컨테이너가 Grid의 영향을 받는 전체공간이고, 
         설정된 속성에 따라 각각의 아이템들이 어떤 형태로 
         배치되는 것---
         
   Flex와 마찬가지로 컨테이너에 display: grid; 설정!  
      .container {
            display: grid;
       } 이렇게..
       
*grid-template-columns, grid-template-rows*
                 (Grid 형태 정의)
  컨테이너에 Grid 트랙의 크기들을 지정해주는 속성
  grid-template-columns : 열의 배치(너비 설정)
   width를 1000px로 값을 줬으면
   grid-template-colums을 20%로 설정했으면
   1000의 20%이니까 200px로 계산!
  //
  grid-template-rows : 행의 배치(높이 설정)
   height를 500px로 값을 줬으면
   grid-template-rows를 10%로 설정했으면
   500의 10%이니까 50px로 계산!
       
*grid-template*
 grid-template-rows, grid-template-columns 대체
  ex) grid-template: 200px 300px / 20% 10% 70%;
                   ->  행의 크기   /    열의 크기
 
 *Fraction*
  분수-fr로 씀
  숫자 비율대로 트랙의 크기를 나눔
   즉, 1fr 1fr 1fr은 균일하게 1:1:1 비율인 3개
   100px 2fr 1fr 같이 함께 적용 가능!
   
 *Repeat*
  반복되는 값을 자동으로 처리할 수 있는 함수
  repeat(반복횟수, 반복값)
   즉, repeat(5, 1fr)은 1fr 1fr 1fr 1fr 1fr
   grid-template: repeat(3, 1fr 4fr 2fr); 이런 패턴    도 가능
      
 *MinMax*
  최솟값과 최댓값 지정할 수 있는 함수
  minmax(100px, auto)는 최소한 100px, 최대는 자동으로 
  늘어나게...
   즉, 아무리 내용의 양이 적더라도 최소한 높이 100px은 확보
       하고 내용이 많아 100px를 넘어가면 알아서 늘어나도록!
  (width 값을 주지 말아야 함수 적용을 볼 수 있음)
  
*Grid Gap*
 grid 항목 사이의 간격 설정  
 grid-row-gap, grid-column-gap    
   모든 행 사이 ,   모든 열 사이    에 간격 설정
  +grid의 시작 또는 끝에 공백 추가xx+
  grid-gap: 20px 10px; 처럼 합해서 쓸 수 있다('/'안 씀)
             행    열
             
*Grid Item*
 Grid 컨테이너의 자식 엘리먼트들 
 이 item들이 Grid 규칙에 의해 배치됨
     
*grid-row-start, grid-row-end*
 Grid item에 적용하는 속성, 각 셀의 영역을 지정!
  -시작번호 / 끝번호 지정-
 start는 시작하는 행,
 end는 끝나는 행으로 grid item을 끝내려는 행보다 하나 더 
 커야 함!!
 ex)행 2,3,4를 포함하는 엘리먼트에는
    grid-row-start: 2;
    grid-row-end: 5;
    
 *grid-row*
  grid-row-start와 grid-row-end 약어
   grid-row: 4 / 6;
           start end
    
*grid-column*
 -몇 개의 셀을 차지하게 할 것인지 지정-
 grid-column-start + grid-column-end
 row와 동일 ~ 여러 열에 걸쳐지게!
  span써서 다른 쪽 끝을 기준으로 열 또는 행을 시작하거나
  끝낼 수 있다!
  ex) .item {
        grid-column: 4 / span 2;
       } ---> item 엘리먼트가 4열에서 시작하여 2열의 
              공간 차지 따라서 4, 5열 차지!!
  //grid item의 시작위치와 길이 알고 있다면 span 쓰기!!

       grid-column: 4 / span 2;
       =
       grid-column: 4 / 6;
       =
       grid-column-start: 4;
       grid-column-end: span 2;
       =
       grid-column-start: span 2;
       grid-column-end: 6;
       네 코드 모두 같은 결과!!
       
 *Grid Area*
  grid 라인으로 둘러싸인 사각형 영역, grid 셀의 집합
   ex) grid-area: 2 / 3 / 4 / span 5;
        차례로
         grid-row-start,
         grid-column-start,
         grid-row-end,
         grid-column-end
        순 이다!!