CSS: 그리드(Grid) 아이템 속성

그리드 레이아웃은 가상의 격자에 요소를 배치합니다. 여기서는 배치를 할 요소들을 감싸는 부모 요소를 컨테이너(container)라 하고 배치할 대상인 자식 요소를 아이템(item)이라 하겠습니다. 컨테이너에 의해 배치된 아이템은 컨테이너의 속성과 조합되어 배치되고 정렬합니다.

아이템 속성

배치

.item {
  grid-column-start: 열이름 or 열번호;
  grid-column-end: 열이름 or 열번호;
  grid-row-start: 행이름 or 행번호;
  grid-row-end: 행이름 or 행번호;
}

.item {
  grid-column: 시작열 / 끝열
  grid-row:  시작행 / 끝행
}

그리드의 행이나 열을 지정해서 아이템을 배치합니다. 각 번호는 1부터 시작해서 열은 오른쪽으로 행은 아래로 숫자가 증가합니다.

.item {
  grid-area: 블록 이름;
  grid-area: 시작행 / 시작열 / 끝행 / 끝열;
}

컨테이너에서 grid-template-areas로 블록 이름을 지정했다면, 아이템에서 블록 이름으로 배치를 정할 수 있습니다.

정렬

.item {
  justify-self: start;
  justify-self: end;
  justify-self: center;
  justify-self: stretch;
}

배치된 블록 안에서 가로 정렬을 지정합니다.

.item {
  align-self: start;
  align-self: end;
  align-self: center;
  align-self: stretch;
}

배치된 블록 안에서 세로 정렬을 지정합니다.

.item {
  place-self: {align-self} / {justify-self};
}

배치된 블록 안에서 세로정렬(align-self)과 가로 정렬(justify-self)을 정합니다.