grid

그리드 선언

display : grid

 

grid-template-columns :

원하는 column의 숫자만큼 크기를 정해준다.

예) grid-template-columns : 150px 150px 150px

가로길이 150px 공간이 3개 만들어진다.

동일하게 반복 될경우 repeat(3 , 150px)와 같이 작성하면 된다.

자식이 4개 이상이면 4번 개체는 아랫줄 맨왼쪽부터 정렬된다.

 

grid-template-rows :

원하는 row의 숫자만큼 크기를 정해준다.

예) grid-template-rows : 150px 150px 150px

세로길이 150px인 공간이 3개 만들어진다.

동일하게 반복 될경우 repeat(3 , 150px)와 같이 작성하면 된다.

 

gap: 

원하는 크기의 여백을 정해 줄 수 있다.

row-gap , column-gap 를 사용하여 각각의 여백을 다르게 할 수 있다.

 

grid-template-areas:

임의로 공간을 정하고 이름으로 작성하여 자식태그에 그 이름을 작성하여  차지 할 공간을 할당 할 수 있다.

예) grid-template-areas:

"header header header header'

"content content content nav"

"content content content nav"

"footer footer footer footer"

위와같이 작성 후 자식태그에 grid-area : header 을 작성해주면 맨 4X4의 공간중 header을 작성한 자식태그는 맨위

가로4칸을 모두 할당 받는다.

 

grid-column-start :

grid-column-end:

 

자식태그에 사용하며 가로의 시작과 끝 라인을 정해준다. 기본적으로 시작은 1 끝은 2 이다.

예) 4칸 의 공간을 모두 할당하고 싶다면

grid-column-start : 1 ;

grid-column-end : 5; 

위와같이 작성한다.

grid-column : 1 / 5 ; 와 같이 작성해도 된다.

 

grid-row-start :

grid-row-end :

자식태그에 사용하며 세로의 시작과 끝 라인을 정해준다. 기본적으로 시작은 1 끝은 2 이다.

예) 두번째 줄 과 세번째 줄에 할 당하고 싶다면

grid-row-start : 2;

grid-row-end : 4;

위와같이 작성한다.

grid-row : 2 / 5 와같이 작성 해도 된다.