1. Grid Items 속성

• grid-column : grid-column-start 과 grid-column-end 의 단축 속성입니다.

  grid-row : grid-row-start 과 grid-row-end 의 단축 속성입니다.

  각 속성을 "/" 로 구분하는 것에 주의하세요.

  grid-row: 1 / 2 = grid-row-start: 1 grid-row-end: 2

  grid-row: 2 / 5 = grid-row: 2 / span 3 = grid-row-start: 2 grid-row-end: span 3

  grid-row: 1 / 4 = grid-row: span 3 / 4 = grid-row-start: span 3 grid-row-end: 4

  → span N이 뒤에 있으면 (+), 앞에 있으면 (-) 하면 된다.

  *grid-row: 2 / span 3 : 2 + 3 = 5, span 3 = 5*

  *grid-row: span 3 / 4 : 4 - 3 = 1, span 3 = 1*

  [이해 돕기]

  .item:nth-child(1) 선택자에서

  grid-column: 1 / 3 = grid-column: 1 / span 2 = grid-column: span 2 / 3

• grid-area : grid-row-start, grid-column-start, grid-row-end, grid-column-end 의 단축 속성이다.

  혹은 grid-template-area가 참조할 영역 이름을 설정할 수도 있습니다.

  grid-area: <grid-row-start> / <grid-column-start> / <grid-row-end> / <grid-column-end>

  grid-area: 영역이름

  ⚠️ 주의할 점

  영역 이름을 설정할 경우 grid-row와 grid-column 개념은 무시됩니다.

  grid-area: 2 / span 3 / 3 / -1 : r-start / c-start / r-end / c-end (순서 주의)

  grid-area: header : header라고 영역 이름 설정

• order : 그리드 아이템이 자동 배치되는 순서를 변경할 수 있습니다. (기본 값 : 0)

  숫자가 작을수록 앞서 배치됩니다.

  .container {
  	display: grid;
  	grid-template-rows: repeat(2, 1fr);
  	grid-template-columns: repeat(3, 1fr);
  }
  .item:nth-child(1) { order: 1; }
  .item:nth-child(3) { order: 5; }
  .item:nth-child(5) { order: -1; }
  

  

• z-index : z-index 속성을 이용해 아이템이 쌓이는 순서를 변경할 수 있습니다. (기본 값 : 0)

  .item:nth-child(1) {
  	grid-area: 1 / 1 / 2 / 3;
  }
  .item:nth-child(2) {
  	grid-area: 1 / 2 / 3 / 3;
  	z-index: 1;
  }
  .item:nth-child(3) {
  	grid-area: 2 / 2 / 3 / 4;
  }