CSS Grid를 정리하면서 - Grid Items

Grid Items

개발자도구에서 위 사진에 있는 grid를 클릭하면 아래와 같이 나오게 된다.

숫자가 정상적으로 나오지 않는다면 화면을 축소해보자

-만약 정상적으로 보이지 않는다면 아래 설정을 확인해보자

 

grid-row-start

- 행에서 몇 번 라인에서 grid가 시작할 것인지 지정할 수 있다.

 

grid-row-end

- grid-row-start에서 몇 번 라인까지 frid가 끝날 것인지 지정할 수 있다.

grid-row-start: 2;
grid-row-end: 4;

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

grid-row : 2 / 4

 

 

justify-self와 align-self

.itme:nth-child(1){
	justify-self : center;
    aling-self : end;
}

 

 

그리드 요소 겹치기

- 아래 처럼 각각 grid-row와 grid-column을 정해주면 그리드를 겹칠 수 있다.

.item:nth-child(1){
	background-color : tomato;
    grid-row: 1;
    grid-column: 1 / span 2;
}
.item:nth-child(2){
	background-color : orange;
    grid-row: 1 / span 2
    grid-column: 2;
}
.item:nth-child(3{
	background-color : yellowgreen;
    grid-row: 2;
    grid-column: 2 / span 2;
}

-현재 1 -> 2 -> 3 으로 쌓임 맥락이 되어있는데 이를 z-index로 바꿀 수 있다.