grid-template-columns: auto auto auto;

길이가 동일한 세 개의 칸으로 grid를 나눠줌
(3열종대)

display: inline-grid;

인라인-그리드로 작성할 시, 자식 요소의 영향을 받음
요컨데, 자식의 padding값이 크면, 각 그리드 아이템이 커지고, 작으면 작아짐

반면

display: grid;

로 작성하면, 자식요소의 padding값과는 상관없이 화면을 가득 메우게 됨

grid-column-gap: 20px;
grid-row-gap: 10px;
grid-gap: 50px;

column-gap은 열만 서로 간격을 20px
row-gap은 행만 서로 간격을 10px
grid-gap은 행열 전부 간격을 50px로 지정

grid-gap: 50px 10px;

다음과 같이 작성시는 column이 50px, row가 10px

.item{
  grid-column-start:1
  grid-column-end:3
}

어떤 요소의 열 시작점을 1로 잡고, 끝을 3으로 잡음
파이썬의 (1,3)같은 개념으로 1보다 크거나 같고 3보다 작음 즉 1,2만 해당

이렇게 하게 되면 item클래스의 요소는 해당 요소의 행에서 2칸의 열을 차지함
grid-row-start, grid-row-end도 마찬가지

.item1 {grid-area: header;}
.item2 {grid-area: menu;}
.item3 {grid-area: main;}
.item4 {grid-area: right;}
.item5 {grid-area: footer;}

.grid-container{
    display: grid;
    grid-template-areas:
    'header header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer footer';
}

위 코드는 grid-area로 먼저 이름을 정해주고,
그에 따라 간단하게 템플릿을 짜는 방법
저렇게 해주면, 아주 간단히 grid-layout을 만들어낼 수 있음

grid-template-columns: 80px 200px auto 30px;

열에 각각 들어가는 아이템들의 너비를 조정
auto의 경우, 길이 - 80 - 200 - 30을 뺀 나머지 값

아이템 정렬방법

display: grid;
justify-content: space-evenly;
justify-content: space-around;
justify-content: space-between;
justify-content: start;
justify-content: end;
justify-content: center;

space-evenly: 각 아이템 요소는 물론이고, 첫요소의 왼쪽, 그리고 마지막 요소의 오른쪽 전부 동일한 공백을 가짐
space-around: 각 아이템 요소 사이는 첫요소의 왼쪽, 그리고 마지막 요소의 오른쪽의 공백보다 두배 넓음 즉, 처음과 마지막만 좀 공백이 좁고 나머진 넓음
space-between: 양끝쪽의 공백이 없고, 나머지 아이템들이 전부 균등한 공백으로 나눠짐
start, end, center: 이름만 봐도 유추되니 생략

span

grid-column:1
grid-row: 1 / span 3

위 코드를 해석하면, 1번째 열에서 1~3번째 행, 즉 세로로 길쭉하게 아이템을 만들겠다는 의미
a / span x는 a부터 x칸 만큼 늘리겠다는 의미이므로 grid-column-start, grid-column-end와는 살짝 다름

만약 그것과 동일하려면

grid-column-start: 1;
grid-column-end: 5;

는 아래와 같이 바꿀 수 있음

grid-column: 1 / 5;

area

grid-area: 1 / 2 / 5 / 6;

다음은 row: 1~4까지, 그리고 column 2~6까지를 의미