1. Grid란?

Flex와 Grid의 차이점

• Flex는 한 방향 레이아웃 시스템 이다. (1차원)
• Grid는 두 방향(가로-세로) 레이아웃 시스템 이다. (2차원)
  

display

1. 플렉스박스를 display: flex; 으로 선언하여 썼던 것처럼, 그리드도 display:grid;를 선언해서 쓸 수 있다.
2. 일단 컨테이너가 될 요소에게 grid를 주면 그때부터 자식 요소들은 Grid Items이 된다.
3. grid를 주면 자식 요소들은 Block 속성이 되고, inline-grid를 주면 Inline 속성이 된다.

grid-template-*

1. 그리드에는 특이하게도 column, row 개념이 존재한다.
2. column은 👇(세로) , row는 👉(가로)를 뜻한다.
   그리드 시스템에선 이 column과 row를 트랙(Track)이라고도 부른다.
3. fraction(분수)라는 이름에 맞춰, 이 단위는 사용 가능한 공간의 일정 비율을 나타낸다.

repeat() 함수와 fr 단위

1.grid-template-column의 값을 여러번 줄때 repeat() 함수의 함수를 사용한다.

grid-template-column: 100px 100px 100px 100px 100px 100px 100px 100px 100px; 
=>
grid-template-columns: repeat(9, 100px);
}

grid-line

• 좀 더 다양한 형태의 레이아웃을 짜고 싶을 때 각 아이템의 위치와 크기를 조정하는 속성을 사용한다.

개인과제에서 grid를 이용해 반응형으로 웹페이지를 만들어 보았다.

.movie-cardbox {
  font-family: "Pretendard-Regular";
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}


@media only screen and (max-width: 350px) {
  .movie-cardbox {
    grid-template-columns: 1fr;
  }
}
@media only screen and (min-width: 350px) {
  .movie-cardbox {
    grid-template-columns: 2fr 2fr;
  }
}

@media only screen and (min-width: 1300px) {
  .movie-cardbox {
    grid-template-columns: repeat(5, 1fr);
  }
}

.movie-cardbox에 디스플레이 값 을 grid로 설정하여 나열한다음
grid-template-columns: repeat(5, 1fr) 값 을 설정해서 5개 나열하면 다음 행으로 이동하도록 설정하였다.
또한, grid-template-columns: repeat(5, 1fr) 값을 여러번 줌으로써 브레이크 역할을 하게끔 할수도있다.
min-width은 해당 HTML 요소가 가질 수 있는 최소 너비(width)를 설정한다.