CSS Grid(그리드)는 2차원(행과 열)의 레이아웃 시스템을 제공한다.
사실 인터넷 익스플로러에서는 사용이 되지 않기 때문에, 공공기관에서 익스플로러를 많이 사용하는 한국에서는 아직 플렉스를 사용하는 것이 유리하다.
하지만 그리드는 아주 간단하게 레이아웃을 만들 수 있기 때문에 굉장히 강력하다.

1. Grid 시작

.grid {
  display: grid;
}

• display: grid; 로 시작할 수 있다.

1. 열 만들기 : column

: 컬럼을 이용하여 열을 만들 수 있다.

.grid {
  display: grid;
  width: 500px;
  grid-template-columns: 100px 20%;
}

• grid-template-columns 으로 정의한다.
• 첫번째 열은 100px, 두번째 열은 전체의 20%인 열을 생성한다.(백분율로도 정의할 수 있다)
• 여러개를 입력할 수록 열이 늘어난다.

2. 행 만들기 : row

: 각 행의 높이를 정할 수 있다.

.grid {
  display: grid;
  width: 1000px;
  height: 500px;
  grid-template-columns: 100px 200px;
  grid-template-rows: 10% 20% 600px;
}

• grid-template-rows 으로 정의한다.

3. 열과 행 만들기 : template

: 위의 두 속성을 합쳐서 한번에 정의할 수 있다.

.grid {
  display: grid;
  width: 1000px;
  height: 500px;
  grid-template: 200px 300px / 20% 10% 70%;
}
- 

1) 상대값 fr

: 그리드에서는 fr이라는 새로운 상대적인 단위를 사용할 수 있다.

.grid {
  display: grid;
  width: 400px;
  height: 500px;
  grid-template: 1fr 1fr 1fr / 3fr 50% 1fr;
}

• 행은 총 3개로 1fr씩 동일하다. 즉 500px을 3등분으로 나눈다.
• 열은 중앙에 있는 열이 50%를 차지하고 왼쪽열이 나머지의 4분의3, 오른쪽열이 4분의 1을 가지게 된다.

2) repeat

: 반복되는 행을 다음과 같이 표현할 수 있다.

.grid {
  display: grid;
  width: 400px;
  height: 500px;
  grid-template-columns: repeat (3, 200px);
}

• 이 경우 200px의 열이 3개 만들어진다.

1) auto-fill

= 갯수에 오토필을 넣을 경우 정해진 사이즈로 최대한 넣을 수 있는 갯수를 넣는다.

2) auto-fit

= 갯수에 오토핏을 넣을 경우 정해진 사이즈로 최대한 넣고 비는 공간을 채워주기 위해 넓이를 조절한다.

4. auto

: 템플릿 자리에 오토를 넣게되면 어떻게 될까

.container {
 grid-auto-rows: minmax(100px, auto);
}