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 값이 큰 값이 위에 보입니다.
'웹 프론트 엔드' 카테고리의 다른 글
CSS 반응형 디자인 (0) | 2024.03.22 |
---|---|
CSS Grid - 단위 (0) | 2024.03.21 |
CSS Grid - 컨테이너 설정 (0) | 2024.03.20 |
CSS Grid (0) | 2024.03.20 |
CSS Animation (0) | 2024.03.18 |