[CSS] Grid - items 속성

 

 

grid-row : grid-row-start와 grid-row-end의 단축 속성

grid-column :  grid-column-start와 grid-column-end의 단축 속성

 

 

사용법 (grid-column도 똑같다)

.item{
    grid-row: <grid-row-start> / <grid-row-end>;
}

.item{
    grid-row: 2 / 5;
    grid-row: 2 / span 3; /* 윗줄과 동일 */
}

.item{
    grid-row: 1 / 4;
    grid-row: span3 / 4; /* 윗줄과 동일 */
}

 

 

grid-area : grid-row-start와end, grid-column-start와 end의 단축속성

grid-template-areas가 참조할 영역 이름을 설정할 수 있다.

*영역 이름을 설정할 경우 grid-row, grid-column 개념은 무시된다.

 

 

사용법

.item{
    grid-area: <grid-row-start> / <grid-column-start> / <grid-row-end> / <grid-column-end>;
    grid-area: 영역이름;
}

 

 

align-self : 단일 그리드 아이템(item)을 수직(열 축) 정렬

*그리드 콘텐츠의 세로 너비가 그리드 컨테이너보다 작아야 함

 

값	의미	기본값
normal	stretch와 동일	normal
start	시작점(위쪽)으로 정렬
end	끝점(아래쪽)으로 정렬
center	수직 가운데 정렬
stretch	열 축을 채우기 위해 그리드 아이템을 늘림

 

 

justify-self : 단일 그리드 아이템(item)을 수평(행 축) 정렬

*그리드 콘텐츠의 가로 너비가 그리드 컨테이너보다 작아야 함

 

값	의미	기본값
normal	stretch와 동일	normal
start	시작점(왼쪽)으로 정렬
end	끝점(오른쪽)으로 정렬
center	수평 가운데 정렬
stretch	행 축을 채우기 위해 그리드 아이템을 늘림

 

 

order : 그리드 아이템이 자동 배치되는 순서를 변경

0을 기준으로 숫자가 작을 수록 앞서 배치된다

음수사용 가능

 

 

z-index : 아이템이 쌓이는 순서를 변경

기본적으론 작성 순으로 아이템이 쌓인다