[css]_16(grid2)

CSS Grid

align-content

grid contents 를 수직 정렬한다.
grid contents 의 세로 너비가 grid container보다 작아야한다.
flex-container의 align-content와 비슷한 속성을 갖는다.

값	의미	기본값
normal	stretch와 같다 세로너비를 최대한 container와 맞춤	normal
start	시작점에서 정렬한다.
end	끝점에서 정렬한다. 위에서 아래로

space-between,space-evenly등의 값도 있다.

justify-content

grid contents를 수평 정렬한다. gird contents의 가로 너비가 grid container보다 작아야한다.
flex-container의 justify-content와 비슷한 속성을 갖는다.

align-items

grid items 들을 수직 정렬한다.
grid item의 세로 너비가 자신의 속한 그리드의 행의 크기보다 작아야한다.
flex-items의 align-items와 비슷한 속성을 갖는다.

justify-items

grid items 들을 수평 정렬한다. grid items의 가로 너비가 grid의 열의 크기보다 작아야한다.
flex-items의 justify-items와 비슷한 속성을 갖는다.

이 모든 경우에 행과 열의 width,heigth값을 잡아주면 stretch는 최대값을 정의해준 width,heigth값 까지만 늘어난다.

xxx-self

justify-content,align-content등으로 수평 수직 정렬을 한 후 각각의 item에 수직 또는 수평 정렬을 부여할 수 있다.

align-self

단일 그리드 아이템을 수직 정렬합니다. item에 직접적으로 입력한다.
grid items의 세로 너비가 자신이 속한 그리드 행의 크기보다 작아야 한다. row

.item:nth-child(1){  각각의 item에 수직정렬을 부여할 수 있다.
    align-self:start;
}  
.item:nth-child(2){
    align-self:end;
}

justify-self

단일 그리드 아이템을 수평 정렬합니다. item에 직접적으로 입력한다.
grid item의 가로 너비가 자신의 속한 열의 크기보다 작아야 한다.

.item:nth-child(1){
    justify-self:center; 각각 의 item에 수평정렬을 입력할 수 있다.
}
.item:nth-child(2){
    justify-self:end;
}

order

그리드 item이 자동 배치되는 순서를 변경할 수 있다. 숫자가 작을수록 앞에 자리잡는다.
-값도 가능하다.

.item:nth-child(1){ order:1;}
.item:nth-child(3){ order:2;}
.item:nth-child(2){ order:-1;}          child(2) -> child(1) -> child(3)의 순으로 자동배치  

z-index

position에서 배웠던 z-index와 같다.z-index값이 높을 수록 위에 위치한다.

See the Pen RwPaJQo by duckey-kim (@duckey-kim) on CodePen.

z-index값은 단 하나의 item에 넣었다. 그렇기 때문에 index값을 넣어준 2가 가장 위쪽으로 오게된다. 그리고 grid-area의 단축속성을 이용하여 item들의 배열을 조정하였다.
Internet Explorer로는 보이지 않을 수 있으니 chrome 이나 firefox를 이용하는 것이 좋다. grid-area의 단축속성은 <row-start>/<column-start>/<row-end>/<column-end>이다.
단축속성에서 처음이 row,row순이 아니라 row,column인것을 인지하여야 한다.