[CSS] grid-template: repeat 사용

grid-template: repeat 사용방법

 

 

 

CSS의 grid-template에서 repeat을 어떻게 이용할지 알아보자.

 

 

(1)

grid-template-rows: 200px 200px
grid-template-columns: 100px 100px 100px

행은 2개, 세로는 200px로 설정

열은 3개, 가로는 100px로 설정

 

 

(2)

grid-template-rows: 200px 200px
grid-template-columns: 1fr 1fr 1fr

행은 2개, 세로는 200px로 설정

열은 3개, 가로는 1 : 1 : 1의 비율로 설정

(fr은 fraction의 약자로 비율을 나타낸다)

 

 

(3)

grid-template-rows: repeat(2, 1fr 2fr 2fr)
grid-template-columns: repeat(3, 1fr)

행은 2개, 세로는 1 : 2 : 2의 비율로 설정

열은 3개, 가로는 1 : 1 : 1의 비율로 설정

 

 

(4)

grid-template: repeat(2, 1fr) / repeat(3, 1fr);

행은 2개, 세로는 1 : 2 : 2의 비율로 설정

열은 3개, 가로는 1 : 1 : 1의 비율로 설정