CSS Grid - 단일 아이템 속성

 

 

 

grid-row & grid-column

/* 1행부터 3행까지 차지하는 item */
grid-row-start : 1;
grid-row-end: 4; 


/* 4행까지 늘어나는 item */
grid-row-start: span 4;

/* grid 이름을 이용한 확장 */
grid-row-start: [grid_name] 2;

   - grid-[ row | column ]-start 와 grid-[ row | column ]-end 의 단축속성입니다.

   - grid의 선을 기준으로 작동합니다.

   grid-row-start & grid-column-start

      - 행/열 내 item에 설정하는 옵션입니다.

      - 지정한 숫자의 선이 item의 시작을 의미합니다.

      - n 번째 행/열부터 시작하는 item을 지정하려면 n을 지정해야 합니다.

   grid-row-end & grid-column-end

     - grid 행/열 내 item의 끝점을 설정합니다.

     - 지정한 숫자의 선이 item의 끝을 의미합니다.

     - n 번째 행/열까지 차지하는 item을 지정하려면 n+1을 지정해야 합니다.

   - span 속성을 사용하여 시작점부터 n 개까지 확장하여 차지하게 할 수 있습니다.

   - grid-area의  이름을 지정하여 작동할 수도 있습니다.

 

 

 

grid-area

   grid-template-areas의 구역을 구분하기 위해 이름을 지정하는 속성입니다.

   grid-row-start, grid-row-end, grid-column-start, grid-column-end 네가지 값을 설정하는 단축속성으로도 사용됩니다.

   - [ row-start | column-start | row-end | column-end ] 의 순서로 입력합니다.

 

 

 

order

   - 그리드 컨테이너 안에서 현재 요소의 배치 순서를 지정합니다.

   - 기본값은 0 으로 Integer 값을 적용합니다.

   - flexbox와 마찬가지로 order값이 작을수록 우선순위가 높으며, 앞쪽에 위치합니다.

 

 

 

z-index

   - z축의 값을 지정해주는 속성입니다.

   - grid의 item들이 겹치는 부분이 생길 때, z-index 값이 큰 값이 위에 보입니다.