css. display: grid 사용법 (grid-template-columns, grid-template-rows, span)

See the Pen grid by soo-toance (@soo-toance) on CodePen.

 

nomadcoders 강좌 들으면서 display:grid를 통해서 div 세팅하는 것을 보고 관련 css 속성을 정리했다.

grid-template-*

grid-template-colums : 세로 지정 가능 

grid-template-rows : 가로 지정 가능 

 

repeat()함수와 fr :

- repeat() : 각각 입력하지 않고 repeat(반복할수, 반복할크기)를 통해서 지정할 수 있다. 

- fr : 사용 가능한 공간의 일정 범위를 가리킨다. 

 

 

그래서 아래와 같은 화면을 만들려면 ? (노마드코더 예시) 

See the Pen grid-2023 by soo-toance (@soo-toance) on CodePen.