[CSS] CSS Grid 정리 / 2. Grid Item

 

이전 글에서 Grid Container에 대하여 알아보았습니다. 지금부터는 Container의 자식 요소인 Item을 알아봅시다.

 

아이템의 시작/끝 위치 지정

기존의 코드를 다시 가져와, item들을 어떻게 조작할 수 있는지 알아봅시다. 

 

grid-row-start

item의 행 시작의 라인 번호를 지정합니다. 이 때, 라인 번호는 사진처럼 개발자 도구에서 Grid를 키게 되면 직관적으로 보이게 되어 작업하는데 수월할 수 있습니다.

 

이 포스팅에서는 예시로 item-3(c라고 적혀있는 item)의 위치를 변경해보겠습니다.

.item-3 {
  grid-row-start: 2;
}

grid-row-start: 2;

 

 

grid-row-end

행 마지막의 라인 번호를 지정합니다.

.item-3 {
  grid-row-end: 4;
}

grid-row-end: 4;

 

행 시작과 마지막 라인을 따로 사용할 수도 있고, 한번에 써서 사용할 수도 있습니다. 일단 따로 사용하는 코드부터 알아봅시다.

.item-3 {
  grid-row-start: 2;
  grid-row-end: 4;
}

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

이 코드를 한 줄로 간단히 바꿀 수 있는데, 그 방법은 grid-row를 사용하면 됩니다.

 

grid-row

행 시작 번호와 행 끝 번호 사이에 슬래시('/')를 넣어 사용합니다.

.item-3 {
  /* grid-row-start | grid-row-end */
  grid-row: 2 / 4;
}

grid-row: 2 / 4;

 

 

grid-column-start

열 시작의 라인 번호를 지정합니다.

.item-3 {
  grid-column-start: 1;
}

grid-column-start: 1;

 

grid-column-end

열 마지막의 라인 번호를 지정합니다.

.item-3 {
  grid-column-end: 5;
}

grid-column-end: 5;

 

grid-column

열 시작 번호와 열 끝 번호 사이에 슬래시('/')를 넣어 사용합니다.

.item-3 {
  /* grid-column-start | grid-column-end */
  grid-column: 1 / 5;
}

 

grid-column도 마찬가지로 grid-row처럼 시작 라인과 끝 라인을 따로 사용할 수 있습니다.

.item-3 {
  grid-column-start: 1;
  grid-column-end: 5;
}

grid-column: 1 / 5;

 

grid-area

grid-area는 grid-row-start, grid-column-start, grid-row-end, grid-column-end를 한번에 설정할 수 있습니다. 이 순서 그대로 작성해주면 됩니다.

 

열 시작 번호와 칼럼 끝 번호 사이에 슬래시('/')를 넣어 사용합니다.

.item-3 {
  /* grid-row-start | grid-column-start | grid-row-end | grid-column-end */
  grid-area: 2 / 1 / 4 / 5;
}

grid-area: 2 / 1 / 4 / 5;

 

아이템 정렬

justify-self

justify-self는 container 안에 있는 item을 행 축 (row axis)을 따라 축을 따라 속성 값에 맞게 조정합니다.

.item-3 {
  justify-self: stretch;
}

justify-self: stretch;

 

.item-3 {
  justify-self: start;
}

justify-self: start;

 

.item-3 {
  justify-self: center;
}

justify-self: center;

 

.item-3 {
  justify-self: end;
}

justify-self: end;

 

align-self

align-self는 container 안에 있는 item을 열 축(column axis)을 따라 속성 값에 맞게 조정합니다.

.item-3 {
  align-self: stretch;
}

align-self: stretch;

 

.item-3 {
  align-self: start;
}

align-self: start;

 

.item-3 {
  align-self: center;
}

align-self: center;

 

.item-3 {
  align-self: end;
}

align-self: end;