2. GRID : display

• 레이아웃 구성시 수평구조 및 블록 개념은 FLEX 를 써서 보다 유용하게 쓸 수 있었지만,
  레이아웃 구성시, 단위별 그룹 및 전체 레이아웃 구성, 전체적인 틀 구성은 Grid 기법이 또한 더 유용할 때가 있다.
  
  
  
• 선언 [ dispaly : grid; ]
  
  
• grid-template < 행 및 열의 개념 >
  • 행 : grid-template-row
    표현 예)
    grid-template-rows: 150px 150px;
    grid-template-rows: 1fr 1fr; >> 1/n : 비율분배
    grid-template-rows: 1fr auto;  >> auti : 자동분배
    grid-template-rows: repeat(2, 150px);
    
    
  • 열 : grid-template-colum
    표현 예)
    grid-template-columns: 150px 150px 150px;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr auto;
    grid-template-columns: repeat(3, 150px);
    grid-template-columns: 120px repeat(3, 1fr) 2fr 10%;
    
    

    

    
    
    • Grid Item < grid line>
      - Grid 하위 item 별로 시작 및 끝점 등을 지정해줘서 배치의 변경이 가능하다.
      

      

      
      
      
    • grid-column >> 열의 확장, 배치 지정
      
      표현 예)
      .item1 {
         grid-column-start: 1;
         grid-column-end: 4;
      }
      
      .item1 { grid-column: 1 / 4; }   >> start / end
      
      .item1 { grid-column: span 3; }  >> 차치크기
      
      
    • grid-row >> 행의 확장, 배치 지정
      
      표현 예)
      .item2 { grid-row-start: 2;
                 grid-row-end: 4; }
      
      .item2 { grid-row : 2 / 4 ; }
      
      
    • gird-area : 한번의 지정 [ grid-row-start, grid-column-start, grid-row-end, grid-column-end ]
      
      표현 예)
      .item3 { grid-area: 2 / 1 / 2 / 4; }
      

      

      
      
    • grid-gap :  grid 격자의 간격 지정
      
      표현 예)
      gap: 30px10px; //
      row-gap:30px; column-gap:10px;
      

      

      
      
    • justify-content / align-content  : 가로 및 세로 축의정렬
      - 표현값 : start / center /end / space-around / space-between / space-evenly / stretch
      

      

      
      
    • minmax() : column, row의 최소 / 최대 크기를 지정합니다
      - repeat() 함수와 유용
      
      
    • auto-fill : 컨테이너에 맞게 자동적으로 조절 (따라서 반응형의 유용)
      - repeat() 함수와 유용
      
      표현 예)  >> 컨테이너 길이 및 컬럼의 갯수에 따라 자동조절 가능
      

      .container {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
      }

      
      

      

      
      
      

• •