grid ( grid-templates-(columns, rows), (column, row) - gap)

flex를 사용하면 나누고 정렬하는 것은 쉽게 되어지는데 격자형태의 grid는 만들기 힘들다. 

따라서 이렇게 구획을 나누기 위해서 grid라는 것이 나오게 되었다. 

 

grid역시 flex-box처럼 father 요소에서 display : grid를 해주면 된다.

그리고 grid design은 대부분 father에서 해야한다.

father에 grid-template-columns: 20px 30px 40px 50px ; 이렇게 자신이 원하는 column의 수와 px까지 정할 수 있다.

나는 3개의 child를 두고 하였기에 마지막 50px 한칸이 빈채로 남아있다.

250px씩 3칸의 column을 만들고 column-gap과 low-gap을 주면 아래와같이 이쁘게 잘 나오게 된다.

이때 column-gap과 row-gap이 동일하다면 gap만 적어주어도 된다.

father에 아래 한 줄을 추가해보았다.

grid-template-rows: 50px 100px 150px;

이렇게 각 줄마다 차례로 지정한 px만큼의 height를 가져가는 것을 확인할 수 있다.