> For the complete documentation index, see [llms.txt](https://shhn0509.gitbook.io/html-and-css/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shhn0509.gitbook.io/html-and-css/css-2/undefined/undefined-13/undefined-2.md).

# 그리드 아이템

## 그리드 설정 - Grid 아이템

### **grid-column-start grid-column-end grid-column grid-row-start grid-row-end grid-row**

* 각 셀의 영역을 지정한다.
* 음수값을 사용해서 끝 점에서의 상대적 위치 이동도 가능하다.

```css
.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` 을 입력해 주는 것이 편리하다.

```css
.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쪽 방향으로

```css
.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

```css
.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)한다.
* 마침표 (.)는 비어있는 그리드 셀을 의미한다. (빈칸으로 표시됨)

```css
/* 각 열과 행을 식별자 이름으로 구분시켜준다. */
.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

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


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://shhn0509.gitbook.io/html-and-css/css-2/undefined/undefined-13/undefined-2.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.