컨테이너 요소의 display CSS 속성 값을 grid (혹은 inline-grid)로 지정하여 해당 요소를 그리드로 만들 수 있다.
부모 속성
gap
각 자식 사의 거리를 지정하기위해 사용한다.
기본값 : 0 0
속성구조
[x] : 행 / 열간 거리를 x 로 지정한다.
[row-gap 속성값] [column-gap 속성값]
row-gap
행간 거리를 지정하기 위해 사용한다.
기본값 : 0
속성값 : [크기]
column-gap
열간 거리를 지정하기 위해 사용한다.
기본값 : 0
속성값 : [크기]
grid-template-columns
그리드의 열(Column)의 개수와 크기를(비율)에 대한 설정이다.
grid-template-rows
그리드의 행(Row)의 개수와 크기를(비율)에 대한 설정이다.
/* 4x2로 공간을 나누어 틀 만들기*/
display : grid;
/* 공간을 4개의 열로 나눈다. */
grid-template-columns : repeat(3, 1fr);
/* 공간을 2개의 행으로 나눈다. */
grid-template-rows : repeat(3, 1fr);
/* grid의 위 아래 사이 간격은 1rem, 왼쪽 오른쪽 사이 간격은 1rem */
gap : 1rem 1rem
자식 속성
grid-row
해당 그리드 아이템이 시작되고 끝날 행의 번호를 한번에 작성한다.
속성구조 : [start 속성값] / [end 속성값]
(1) grid-row-start
해당 그리드 아이템이 시작될 행의 번호이다.
속성값 : [숫자]
(2) grid-row-end
해당 그리드 아이템이 끝날 행의 번호이다.
속성값 : [숫자]
grid-column
해당 그리드 아이템이 시작되고 끝날 열의 번호를 한번에 작성한다.
속성구조 : [start 속성값] / [end 속성값]
(1) grid-column-start
해당 그리드 아이템이 시작될 열의 번호이다.
속성값 : [숫자]
(2) grid-column-end
해당 그리드 아이템이 끝날 열의 번호이다.
속성값 : [숫자]
/* 위의 표처럼 grid를 활용하여 행/열 병합 */
display : grid;
grid-template-columns : repeat(3, 1fr);
grid-template-rows : repeat(3, 1fr);
/* 1열에서 3열전까지 합쳐라 */
grid-column : 1/3;
/*
위와 동일한 내용
grid-column-start : 1;
grid-column-end : 3;
*/
/* 1행에서 3행전까지 합쳐라 */
grid-row : 1/3;
/*
위와 동일한 내용
grid-row-start : 1;
grid-row-end : 3;
*/
