왜 CSS는 Grid가 필요할까. flex로 할 수 없는 배치를 Grid가 할 수 있기 때문이다. flex는 죄우 대칭, 정렬, 위치전환 등을 할 수 있지만 격자 형식으로 element를 제어할 수 없다. 그렇기에 Grid를 사용하는 것이다.
grid의 제어 대상은 flex처럼 parnt에서 일어난다. 그리고 grid설정은 display : grid로 한다. 규칙은 flexbox와 매우 유사하다.
parent를 grid로 설정하면 element의 갯수에 따라 depth가 보인다. 총 세개의 row가 보인다.
다음은 parent에 원하는 column을 주기위해 아래와 같이 코드를 구현하면 px에 맞는 column 갯수가 생성된다.
.father {
display: grid;
grid-template-columns: 20px 55px 89px 100px;
}
그리고 column이 세개로 지정하고 지정된 column갯수를 넘어간 child는 다음 row에 자동으로 배치된다.
grid-column-gap을 10px 를 준다면 다음과 같이 표시된다.
지금은 grid-column-gap대신에 column-gap으로 줄여 쓴다.
반대로 row-gap도 마찬가지로 치수를 주면 column-gap과 같이 row방향으로 갭을 준다. 혹은 gap만으로 모든 grid사이에 갭을 줄 수 있다.
grid-template-columns: 250px 250px 250px;
gap: 10px;
grid-template-column의 반대인 grid-template-rows도 같은 원리로 제어할 수 있다.