우리는 본격적으로 grid에 대해서 배워볼 것이다. 하지만! 모든 공부가 시작할때는 기본 이론부터 시작하듯이 grid도 마찬가지로 기본 이론을 먼저 배워볼 것이다.

grid도 flex와 비슷하다. flex가 부모에 display:flex 속성을 적용하듯이, grid도 그렇다. grid에서는 행과 열이 중요하다.

<!— display: grid 속성을 주었을 때 —>

그리고 여기서 열을 조절할 것이다.

grid-template-columns : 20px 55px 89px 100px;를 했을때화면은 이렇게 변할 것이다. 1은 20px만큼 차지하도록 2는 55px만큼 차지하도록 3은 89px만큼, 4는 보이지 않지만 어쨋든 할당이 된 공간이기 때문에 100px만큼 말이다.

grid-template-columns 가 있듯이, 당근 반대 속성인 grid-template-rows도 있다. 그리고 우리는 이 요소들의 사이를 띄어주고 싶을 때도 있을 것이다. 그럴땐 grid-gap을 이용해서 떼어 둘 수도 있다.

#gap 사용 했을 때

#grid-template-rows도 동시적용