Grid Container

• display : grid container 를 화면상에 어떻게 보여줄지 정의 grid , inline-grid

• grid-template-rows : 명시적 행(row, track)의 크기를 지정 e.g. grid-template-rows: repeat(3, 1fr);

• grid-template-columns : 명시적 열(column, track)의 크기를 지정 e.g. grid-template-columns: 100px 200px 300px;

• grid-template-areas : ‘grid-area’ 를 사용한 그리드 템플릿 지정

  .container {
  	display: grid;
  	grid-template-colums: repeat(3, 1fr);
  	grid-template-rows: repeat(4, 100px);
  	grid-template-areas:
  		'h h h'
  		'm m s'
  		'm m s'	
  		'f f f'
  }
  
  .item1 { grid-area: h; }
  .item2 { grid-area: m; }
  .item3 { grid-area: s; }
  .item4 { grid-area: f; }
  

• grid-template : ‘grid-template-rows’ + ‘grid-template-columns’ + ‘grid-template-areas’

  .container {
    display: grid;
    grid-template:
      "h h h" 80px
      "m m s" 350px
      "m m s" 350px
      "f f fr" 130px
      / 2fr 100px 1fr;
  }
  
  .item1 { grid-area: h; }
  .item2 { grid-area: m; }
  .item3 { grid-area: s; }
  .item4 { grid-area: f; }
  

• grid-row-gap (row-gap) : 각 행과 행 사이의 간격(Gutter)을 지정 e.g. grid-row-gap: 10px;

• grid-column-gap (column-gap) : 각 열과 열 사이의 간격(Gutter)을 지정 e.g. grid-column-gap: 5px;

• grid-gap (gap) : 각각의 행과 열 사이의 간격을 동시에 지정 (row - column 순으로) e.g. grid-gap: 10px 5px;

• grid-auto-rows : 암시적 행(row, track)의 크기를 지정 e.g. grid-auto-rows: 50px;

• grid-auto-columns : 암시적 행(column, track)의 크기를 지정 e.g. grid-auto-columns : 100px;

• grid-auto-flow : 배치하지 않은 요소(items)을 어떤 방식으로 배치할지 지정 (자동 배치 알고리즘) row* , column , row dense , column dense

• grid : ‘grid-template-XXX’ + ‘grid-auto-XXX’ (단축속성)

• align-content : 그리드 내용(Contents)의 열 축(수직) 정렬 지정 normal(=stretch)* , start , end , center , space-around , space-between , space-evenly

• justify-content : 그리드 내용(Contents)의 행 축(수평) 정렬 지정 normal(=stretch)* , start , end , center , space-around , space-between , space-evenly

• place-content : ‘align-content’ + ‘justify-content’ (단축속성) e.g. place-content: start end; (align - justify 순으로)

• align-items : 그리드 아이템(items)의 열 축(수직) 정렬 지정 normal(=stretch)* , start , end , center

• justify-items : 그리드 아이템(items)의 행 축(수평) 정렬 지정 normal(=stretch)* , start , end , center

• place-items : ‘align-items’ + ‘justify-items’ (단축속성) e.g. place-items: center end; (align - justify 순으로)