# 그리드 컨테이너

## 그리드 설정 - Grid 컨테이너

### **display**

* 그리드 컨테이너 요소를 설정하고 그리드 포멧팅 컨텍스트(격자무늬) 영역을 생성한다.
* flex와 마찬가지로 `display: grid;`를 적용하는 것이 그리드의 시작이다.
* `display: grid;`만 입력했을 때 아무런 변화도 일어나지 않는다.
  * `<grid>` :

    `<inline-grid>` : block과 inline-block을 생각해보면 이해가 쉽다. inline-block 처럼 적용된다. &#x20;

    `<subgrid>` (Level2에서 지원 예정)

    ```css
    .grid-container {
    display: grid; /* display: inline-grid; */
    }
    ```
* `<float>` `<clear>` `<column>` `<vertical-align>` 속성은 그리드 컨테이너 요소에 적용되지 않는다.

### **grid-template-rows/ grid-template-columns (명시적)**

* 공백으로 구분된 값 리스트를 해석하여 그리드 행, 열을 설정합니다. 각 값은 트랙의 크기를 말합니다.
* 컨테이너의 그리드 트랙의 크기를 지정해 준다.
* 행과 열에 입력하는 크기에 갯수에 맞춰 행과 열이 생성된다.
* 단위 : px, rem, em, %, fr 등
  * auto : 자동 설정 (브라우저 크기에 따라 자동으로 변경됨.)
* rows, columns 타이핑할 때 s 오타 조심하기!!!!!
* 예를들어 2행 4열의 그리드를 만들었을 때 아이템의 갯수가 6개라면 나머지 두 셀은 공백으로 남겨진다.

```css
.grid {
  display: grid;
  grid-template-rows: 20% 100px auto;      /* 3행 */
  grid-template-columns: 40px 100px;       /* 2열 */
  /* grid-template-columns: 80px auto */
  /* grid-template-columns: repeat(5, 1fr); */
  /* grid-template-columns: 150px 1.5fr 2fr */

/* 속기형 */
/* grid-template: row values / column values; */
  grid-template: repeat(5, 20px) / repeat(3, 1fr)
}
```

### **grid-row-gap grid-column-gap grid-gap**

```css
.grid {
  display: grid;
  grid-row-gap: 20px;
  grid-column-gap: 10px;

  /* 속기형 : row column */
  grid-gap: 10px; /* 행과 열에 동일한 값 적용 */
  grid-gap: 10px 20px;
}
```

### **fr(Fraction) 단위**

* 컨테이너 전체 크기에서 숫자의 비율대로 트랙을 나눈다

```css
.grid {
  display: grid;
  grid-template-columns: 2fr 1.3fr 1fr; /* 트랙을 2:1.3:1의 비율로 나눈다. */
}
```

### **repeat() 함수**

* 반복되는 값을 자동으로 처리할 수 있는 함수이다.
* repeat(반복횟수, 반복하는 값)
  * 반복횟수 : 양수만 가능, 1이상 / 반복하는 값 : 그리드 트랙 리스트(배열)

```css
.grid {
  display: grid;
  grid-template-rows: repeat(5, 1fr);
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  /* grid-template-rows: repeat(2, 1fr 2fr); 
    grid-template-columns: 1fr 2fr 1fr 2fr; */
}
```

### **minmax() 함수**

* 최소값과 최대값을 지정할 수 있는 함수이다.
* repeat() 함수 내부, 외부에서 사용할 수 있다.
* minmax(최소값, 최대값)
  * 부모 컨테이너의 크기가 최소값 미만으로 작아지지 않도록, 최대값 초과로 늘어나지 않도록 설정한다.

```css
.grid {
  display: grid;

  /* 1, 2행 : 최소값 20px을 가지며 셀 안의 내용이 많아질 수록 트랙의 높이값이 자동으로 늘어난다 */
  grid-template-rows: repeat(2, minmax(20px, auto));
  /* grid-template-rows: repeat(2, minmax(20px, 1fr)); */

  /* 1열 : 최소값 30px을 가지며 셀 안의 내용이 많아질 수록 트랙의 너비의 값이 자동으로 늘어난다.
       2, 3열 : 1열의 너비를 제외한 나머지 공백의 공간을 1:1의 비율만큼 나눠가진다. */
  grid-template-columns: minmax(30px, auto) repeat(2, 1fr);
}
```

### **grid-auto-rows grid-auto-columns (암시적 implict)**

암시적인 그리드 트랙이란?

* 사용자가 설정하지 않은 임의의 트랙으로, 사용자가 명시적으로 `grid-template-rows` / `grid-template-columns` 속성을 설정하지 않은 나머지 그리드 트랙을 가리킨다.
* 즉, 아이템 박스는 생성되어 있으나 `grid-template-rows` / `grid-template-columns` 속성이 설정되어 있지 않은 트랙을 말한다.
* 단위 : px, rem, em, %, fr 등
* **속기형 없음**
* grid-auto-columns : <https://developer.mozilla.org/ko/docs/Web/CSS/grid-auto-columns> &#x20;

  grid-auto-rows : <https://developer.mozilla.org/ko/docs/Web/CSS/grid-auto-rows>

```css
.grid {
  display: grid;

  grid-auto-rows: minmax(100px, auto);

  /* min-content : 컨텐트의 개수 만큼 공간박스 설정 */
  grid-auto-columns: min-content;
}
```

### **grid-auto-flow**

* 아이템이 자동 배치되는 흐름을 결정하는 속성입니다.
  * row (기본값) : 각 행을 차례로 채우고 필요에 따라 새 행을 추가하는 자동 배치 알고리즘
  * column : 각 열을 차례로 채우고 필요에 따라 새 열을 추가하는 자동 배치 알고리즘
  * dense
    * 배치 중 나중에 크기가 작은 아이템이 존재할 경우, 그리드 영역 앞부분의 남은 공간에 자동 배치하는 알고리즘
    * row와 column에 따라 기준이 달라진다.
  * row dense
  * column dense

```markup
<section class="grid-contianer">
  <div class="item-a">item-a</div>
  <div class="item-b">item-a</div>
  <div class="item-c">item-a</div>
  <div class="item-d">item-a</div>
  <div class="item-e">item-a</div>
</section>
```

```css
.grid-contianer {
  display: grid;
  grid-template: repeat(5, 60px) / repeat(2, 30px);
  grid-auto-flow: row;
}

.item-a {
  grid-row: 1 / 3;
  grid-column: 1;
}

.item-e {
  grid-row: 1 / 3;
  grid-column: 5;
}
```

### **justify-items align-items 아이템 내부 콘텐츠 가로/세로 정렬**

* `justify-items` : 행(row) 축을 따라 그리드 아이템 내부 콘텐츠를 정열한다.
* `align-items` : 열(column) 축을 따라 그리드 아이템 내부 콘텐츠를 정렬한다.
* 이 설정은 그리드 컨테이너 내부 모든 그리드 아이템에 적용된다.
* 값
  * stretch(기본값) : 그리드 영역 전체 너비를 채움
  * start : 그리드 영역의 시작점에 콘텐츠 정렬
  * center : 그리드 영역의 끝점에 콘텐츠 정렬
  * end : 그리드 영역 중앙에 콘텐츠 정렬

### **justify-content align-content : 아이템 트랙 가로/세로 정렬**

* `justify-content` : 행(row) 축을 따라 아이템 트랙을 정렬한다.
* `align-content` : 열(column) 축을 따라 아이템 트랙을 정렬한다.
* 그리드 아이템들의 너비의 총 합이 그리드 컨테이너의 크기보다 작아야 한다.
* 그리드 아이템들에 설정되어 있는 너비값의 단위가 같아야 한다. (px 등)
* 값
* stretch : 그리드 컨테이너 영역을 아이템 트랙 크기를 조정하여 채움
* start : 그리드 컨테이너 영역의 시작점에 아이템 트랙을 정렬
* center : 중앙에 아이템 트랙을 정렬
* end : 끝점에 아이템 트랙을 정렬
* space-around : 그리드 컨테이너의 남은 영역을 아이템 트랙(행)이 좌/우 공간으로 나눔 (양 가장자리 공간은 아이템 그룹 사이 간격의 1/2)
* space-between : 그리드 컨테이너 영역의 양 가장자리 공백 없이, 아이템 트랙(행) 사이 공간을 나눔
* space-evenly : `space-around`와 비슷해보이지만, 공간을 모두 동일하게 나누는 점이 다름

```css
.grid {
  display: grid;

  justify-items: center;
  align-items: center;
  justify-content: center;
  align-content: center;
}
```

### place-items/ place-self 속기형&#x20;

* place-items 속성은 align-items 과 justify-items의 속기형이다. &#x20;
* place-self 속성은 align-self와  justify-self의 속기형이다.


---

# Agent Instructions: 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-1.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.