[CSS Grid] Grid Template

flex의 경우, 주축을 기준으로 다양한 옵션을 설정할 수 있지만 grid에 비해 많은 제한사항이 있다.

물론 주축을 기준으로 위치를 설정할때는 justify-content, 교차축을 기준으로 설정할때는 align-items가 있고

서로 같은 옵션의 파라미터를 공유하고 대상의 주축 기준에 따라 엘리먼트의 위치가 변경된다.

 

1.   grid-template-columns: 1fr 1fr 1fr 1fr;

grid-template-columns는 요약하면 " 열 = width = 넓이 = 가로 " 단어로 설명할 수 있다.

ㅇ 

 

  

2.   grid-template-rows: 1fr 1fr 1fr 1fr;