.grid {
  display: grid;
  gap: 5px;
  height: 50vh;
  grid-template-columns: repeat(5, minmax(100px, 1fr));
  grid-template-rows: repeat(4, 1fr);
  grid-auto-columns: 100px;

  /* justify-items: stretch; default 값 
    align-items: stretch; default 값
    위의 두 property는 fraction 안에서도 구역을 나누어 얼마나 채워질지를 정할 수 있는 property 이다.*/

  /*place-items: 
    end start;  위의 두 값을 다 합친 지름길이다. 앞에 값이 세로이고 뒤에가 가로값이다.
    justify-content: center; 이번에 배울 property는 grid 전체를 조정하는 코드이다
    align-content: center;
    place-content: end start; 마찬가지로 위에 두개를 한꺼번에 modify 한다.*/

  /*grid-auto-rows: 
    grid-auto-rows: 100px; 라고 하면 마지막, grid fraction 을 초과하여 item이 외부에서 들어올 경우(초기에 설정해놓은 가로 세로 줄보다 더 많은 item을 말함)
    밑으로(row 방향으로) 100px의 그리드가 자동으로 생성되면서 item이 거기에 담기게 됨. 근데 만약 row 방향이 아닌 column 방향으로 item 이 생성되게 하고 싶다 할때는
    grid-auto-flow: columns; 라고 하면 옆으로 새로운아이템이 생성되는 방향이 옆으로 바뀜. */

  /*minmax:
    grid-template-columns: repeat(10, minmax(100px, 1fr)); 라고 하면 말그대로 최소가 100px 이고 최대가 1fr으로 설정하는 property 이다
    grid를 한층더 유연하게 만들어준다. */
}

.item:nth-child(odd) {
  background-color: honeydew;
} /*홀수번째 아이템을 모두 선택한것임 */

.item:nth-child(even) {
  background-color: indianred;
} /*짝수번째 아이템을 모두 선택한것임 */

.grid:first-child {
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}

.grid:last-child {
  grid-template-columns: repeat(auto-fit, minmax(max-content, 500px));
} /* grid=class 가 2개있다고 하자. 그럼 첫번째 grid에만 효과를 주고 싶을때 .grid:first-child 라고 한다. 마지막은 last-child 라고 한다. */

/*이번엔 auto-fill 이랑 auto-fit에 대해 배워볼거다. auto-fill은 item이 자동채워지는 게 아닌, grid가 남은 스크린을 자동으로 채우는것이다.
auto-fit은 아이템이 스크린의 사이즈를 균일하게 배분받아서 크기가 설정된다. */

/* 마지막으로 배울 property는 min-content와 max-content 이다. min-content는 상자안에 item 크기가 작아질수있을만큼 작아지게 만든뒤 

상자의 크기도 그 item의 크기만큼 줄이는것. max-content는 반대로 item의 크기를 최대로 키운다음 상자의 크기도 그만큼 키우는거다. 
이 두개의 property는 minmax 와 repeat 와도 융합해서 쓸수 있다 */