그리드 아이템

그리드 설정 - Grid 아이템

grid-column-start grid-column-end grid-column grid-row-start grid-row-end grid-row

• 각 셀의 영역을 지정한다.

• 음수값을 사용해서 끝 점에서의 상대적 위치 이동도 가능하다.

.grid {
  display: grid;
  grid-auto-columns: repeat(3, 150px);
  grid-auto-rows: repeat(2, 150px);
}

.item:nth-child(1) {
  /* 그리드 아이엠을 열[3,4] 행[2,3] 위치에 배치 */
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 2;
  grid-row-end: 3; /* 그리드 라인이 1-3번까지만 있기 때문에  grid-row-end: 3;을 입력하지 않아도 정상작동 */
}

/* 속기형  */
/* grid-column: start/end  */
/* grid-row: start/end */
.item:nth-child(1) {
  grid-column: 3/4;
  grid-row: 2/3;

  /* start와 end값이 같을 때 기본값: span1 */
  grid-row: 2;
}

Grid Area의 속기형

• grid-area : grid-row-start / grid-column-start / grid-row-end / grid-column-end

• 그리드의 라인의 갯수가 많아지면 마지막 라인의 넘버를 기억하기 쉽지 않다. 그래서 마지막 라인 -1 을 입력해 주는 것이 편리하다.

.item:nth-child(1) {
  grid-column: 1/3;
  grid-row: 1/2;

  /* 또는 */
  grid-area: 1 / 1 / 2 / 3;
}

Grid Span

• 기본값 : 1

• 기준 라인이 중요하다.

• 그리드 영역 선택 가능

• span값이 start자리에 있다면 start쪽 방향으로, end자리에 있다면 end쪽 방향으로

.item:nth-child(1) {
  /* column라인 3번에서  오른쪽(end)방향으로 2칸 : grid-column: 3/5 */
  grid-column: 3 / span 2;

  /* row라인 4번에서 위쪽(start)방향으로 3칸 : grid-row: 1/4 */
  grid-row: span 3/4;
}

order

• 그리드 아이템을 재 정렬한다.

• 단, 순서를 변경해도 접근성에 문제가 발생하지 않는 경우에만 사용해야 한다.

• 기본값 : 0

.grid {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: repeat(3, minmax(50px, auto));
}

/* 모든 아이템의 기본값은 0이기 때문에 1번 아이템에 오더값을 4를 준다고 해서 4번 째 칸으로 이동하지 않고 맨 마지막 칸으로 이동한다. */
.item:nth-child(1) {
  order: 4;
}
.item:nth-child(2) {
  order: 0;
}
.item:nth-child(3) {
  order: 0;
}
.item:nth-child(4) {
  order: 0;
}
.item:nth-child(5) {
  order: 0;
}
.item:nth-child(6) {
  order: 0;
}

/* 부모 컨테이너에 렌더링되는 아이템 번호 순서는 4,2,6,1,3,5 이다. */
.item:nth-child(1) {
  order: 4;
}
.item:nth-child(2) {
  order: 2;
}
.item:nth-child(3) {
  order: 5;
}
.item:nth-child(4) {
  order: 1;
}
.item:nth-child(5) {
  order: 6;
}
.item:nth-child(6) {
  order: 3;
}

grid-template-areas

• 각 그리드 영역에 이름을 붙이고, 그 이름을 사용해서 배치한다.

• 셀의 개수 만큼 해당 위치에 이름을 입력한다.

• 그리드 영역 이름을 반복하면 그리드 셀을 병합(merge, span)한다.

• 마침표 (.)는 비어있는 그리드 셀을 의미한다. (빈칸으로 표시됨)

/* 각 열과 행을 식별자 이름으로 구분시켜준다. */
.grid {
  grid-template-areas:
    "header header header" /* 1행: 3열 모두 header */
    "sidebar content1 content2" /* 1행: 1열 sidebar, 1열 content1, 1열 content2 */
    "sidebar content3 content3"
    "footer footer footer";

  /* "   .     .      .     " */
  /* "   main  .   sidebar  " */
}

/* 그리드 영역에 식별자 이름을 입력 */
/* 요소의 이름과 grid-area의 이름이 꼭 같은 필요는 없다. .header { grid-area: top; }  */
.header {
  grid-area: header;
}
.sidebar {
  grid-area: sidebar;
}
.content-1 {
  grid-area: content1;
}
.content-2 {
  grid-area: content2;
}
.content-3 {
  grid-area: content3;
}
.footer {
  grid-area: footer;
}

justify-self align-self : 개별 아이템 가로/세로 정렬

• justify-self : 행(row) 축을 따라 특정한 아이템을 정렬한다.

• align-self : 열(column) 축을 따라 특정한 아이템을 정렬한다.

• 값

• stretch

• start

• center

• end

.item.item-1 {
  justify-self: center;
  align-self: center;
}